我怎样才能让不同的图像适应相同的 'box'？

Question

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

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

Answer 1

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

The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its container.

可能的值：包含、覆盖、填充、none, 缩小

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

我怎样才能让不同的图像适应相同的 'box'？

How can I get different images to fit in the same 'box'?

html

css

position

image

width