如何让不同的图像适合同一个“盒子”？答案

【问题标题】：How can I get different images to fit in the same 'box'?如何让不同的图像适合同一个“盒子”？
【发布时间】：2021-05-22 07:35:43
【问题描述】：

如何确保图像始终具有“相同”的宽度和高度，以便它们在这两个方面匹配？现在第二个更大了，盒子不再匹配了。我需要一个大列表，其中包含我从某人那里获得的图像，遗憾的是它们的尺寸并不相同。 图片需要按比例缩放

.slider-item {
  width: 50%;
  display:block;
  float:left;
}
.slider-item img {
  max-width: 100%;
}
.text {
  background-color: grey;
}

<div class="slider-item">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="product">
   <div class="text">
      <h3>123</h3>
      <h4>23</h4>
      <h2>Bonte</h2>
      <p>Text</p>
      <a href="">Order</a>
   </div>
</div>

<div class="slider-item">
   <img src="https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg" alt="product">
   <div class="text">
      <h3>123</h3>
      <h4>23</h4>
      <h2>Bonte</h2>
      <p>Text</p>
      <a href="">Order</a>
   </div>
</div>

【问题讨论】：

标签： html css image position width

【解决方案1】：

为图像设置height 和width。然后对它们应用object-fit: cover CSS 规则。

object-fit CSS 属性设置替换内容的方式元素，例如 or ，应调整大小以适合其容器。

可能的值：contain、cover、fill、none、scale-down em>

.slider-item {
  width: 50%;
  display: block;
  float: left;
}

.slider-item img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

.text {
  background-color: grey;
}

<div class="slider-item">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="product">
  <div class="text">
    <h3>123</h3>
    <h4>23</h4>
    <h2>Bonte</h2>
    <p>Text</p>
    <a href="">Order</a>
  </div>
</div>

<div class="slider-item">
  <img src="https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg" alt="product">
  <div class="text">
    <h3>123</h3>
    <h4>23</h4>
    <h2>Bonte</h2>
    <p>Text</p>
    <a href="">Order</a>
  </div>
</div>

【讨论】：

救命稻草！我不知道 object-fit: cover;规则。我只认为在 css 中的“背景图像”上可能会有这样的东西。
高度：10rem；只是随机的吧？使用 rem 而不是 px 没有特别的原因吗？
是的，它是随机的。只需选择最适合您的。