使用react-bulma-component使图像具有响应性

Question

我在一个开源项目中使用了react-bulma组件，但我不能在移动设备上使图像响应。

它们应该看起来像这样：

Desktop-view

但它们看起来像这样：

Mobile-view

下面是来自父组件的代码：

const Nomenclature = props => {

  const auth = useContext(AuthContext)

  return (
    <Columns.Column size= "half" breakpoint="desktop">
      <Box>
        <Media>
          <Media.Item renderAs="figure" position="left">
            {props.nomenclature.cards.slice(0, 1).map(card => (
              <Card
                key={card.id}
                alt={card.originalname}
                src={card.location}
                imageCount={props.nomenclature.cards.length}
                images={props.nomenclature.cards}
              />
            ))}
            {auth.isLoggedIn && (
            <Button
              renderAs={Link}
              to={`/nomenclature/${props.nomenclature.id}`}>
              Télécharger
            </Button> )}
          </Media.Item>

          <Media.Item>
            <Content>
            <Heading size={3}>
              {props.nomenclature.name ? props.nomenclature.name : 'sans nom'}
            </Heading>
            <small>Par <strong>{props.nomenclature.author}</strong></small>
            <Tags tags={props.nomenclature.tags} />
            </Content>
          </Media.Item>
        </Media>
      </Box>
    </Columns.Column>
  );
};
export default Nomenclature;

下面是来自子组件的代码：

const Card = props => {
  const cardPreviewImages = props.images.map((image, index) => {
    return (
      <img
        className="image-preview"
        key={index.toString()}
        src={image.location}
        alt={image.alt}/>
    );
  });
  return (
    <div className="thumbnails">
      <div className="image-previews-container">{cardPreviewImages}</div>
      <Tag rounded size="large" className="nomenclature-image-count">
        {props.imageCount}
      </Tag>
      <div className="thumbnail">
        <img src={props.src} alt={props.alt}/>
      </div>
    </div>
  );
};

export default Card;

Answer 1

仅仅是css就足够了。如果可以设置大小，则可以执行以下操作：

.container {
  width: 200px;
  height: 200px;
}

.container img {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 200px;
}

这当然是一个例子，但如果你提供600x1200px的图像，它会自动缩放以适合你的容器。也许你可以让它适应你的实际代码。