如何在设置宽度的 flexbox 中使图像响应？

Question

我有不同宽度和高度的图片，但我想让它们覆盖在项目 flexbox 中，我该怎么做？

.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>

我想让这个框响应，所以在移动时它必须换行

Answer 1

将图像设置更改为 => object-fit: contain（在您的情况下不覆盖）：

contain The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. 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 The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

** 通常，在响应式网站上为内容列提供固定高度并不是最好的主意（可能会导致溢出问题）。

如何在设置宽度的 flexbox 中使图像响应？

How to make image responsive in flexbox with set width?

html

css

layout

flexbox

responsive-design