Как сделать изображение отзывчивым во flexbox с заданной шириной? - PullRequest
Новая
       36

Как сделать изображение отзывчивым во flexbox с заданной шириной?

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

У меня есть фотографии, которые имеют разную ширину и высоту, но я хочу, чтобы они помещались в флексбокс элемента, как я могу это сделать? 

.item-here img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.section-grid {
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.item-here {
  width: 200px;
  padding: 10px;
  height: 300px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
}
<div class="section-grid" id="list-product">
  <div class="item-here">
    <img class="" src="https://www.lindemans.com/-/media/Images/Lindemans2016/Wine-Bottleshots/Bin-Series/New-Bin-Bromley/Lindemans-Chardonnay-Bin-65-BS.ashx?la=en&sc=1&modified=20190521001727&mw=1382&hash=AE8135A39D9B975147D12D1382ABD0926A327983">
  </div>

  <div class="item-here">
    <img class="" src="https://www.lindemans.com/-/media/Images/Lindemans2016/Wine-Bottleshots/Bin-Series/New-Bin-Bromley/Lindemans-Chardonnay-Bin-65-BS.ashx?la=en&sc=1&modified=20190521001727&mw=1382&hash=AE8135A39D9B975147D12D1382ABD0926A327983">
  </div>
</div>

Я хочу, чтобы это поле было отзывчивым, поэтому в мобильном режиме оно должно быть обернуто

my flex image here

1 Ответ

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

Измените настройку изображения на => object-fit: contain (не в вашем случае):

содержат Замененное содержимое масштабируется для сохранения его соотношения сторон при подгонке под окно содержимого элемента. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.item-here img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.item-here {
  border: 1px solid red;
  width: 200px;
  padding: 10px;
  height: 300px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
}

.section-grid {
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
<div class="section-grid" id="list-product">
  <div class="item-here">
    <img class="" src="https://www.lindemans.com/-/media/Images/Lindemans2016/Wine-Bottleshots/Bin-Series/New-Bin-Bromley/Lindemans-Chardonnay-Bin-65-BS.ashx?la=en&sc=1&modified=20190521001727&mw=1382&hash=AE8135A39D9B975147D12D1382ABD0926A327983">
  </div>

  <div class="item-here">
    <img class="" src="https://www.lindemans.com/-/media/Images/Lindemans2016/Wine-Bottleshots/Bin-Series/New-Bin-Bromley/Lindemans-Chardonnay-Bin-65-BS.ashx?la=en&sc=1&modified=20190521001727&mw=1382&hash=AE8135A39D9B975147D12D1382ABD0926A327983">
  </div>
</div>

VS object-fit: cover (Ваш код):

cover Размер заменяемого контента поддерживается его соотношение сторон при заполнении всего поля содержимого элемента. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан для соответствия. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

enter image description here

** В целом, не рекомендуется задавать фиксированную высоту для полей содержимого на отзывчивом сайте (может привести к переполнению-у проблем).

...