Сделайте изображение отзывчивым с помощью компонентов bulma - PullRequest
Новая
       35

Сделайте изображение отзывчивым с помощью компонентов bulma

0 голосов
/ 29 апреля 2020

Я использую реагирующие-булма-компоненты в проекте с открытым исходным кодом, но я не могу сделать изображения адаптивными на мобильных устройствах.

Они должны выглядеть следующим образом:

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;

1 Ответ

0 голосов
/ 29 апреля 2020

Достаточно css. Если вы можете установить размеры, вы можете сделать это: 

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

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

Конечно, это пример, но если вы предоставите изображение 600x1200px, оно автоматически масштабируется, чтобы поместиться в ваш контейнер. Может быть, вы можете адаптировать его к вашему фактическому коду.

...