html - 使用对象拟合和对象位置缩放、居中和裁剪图像

Question

我想拍摄一张偶然的图像并让它按比例放大/缩小以使用父 div 的整个空间，同时保持其原始比例。我希望图像被裁剪(没关系，只要它在垂直和水平方向上都居中)。

我试过这段代码:

<div class="container" style="width: 800px">
  <div class="row">
    <div style="
          height:340px; 
          width: 100%; 
          overflow: hidden;
          border: 3px solid red;
          ">
      <img src="http://via.placeholder.com/500x500" style="
            object-position: center;
            object-fit: cover;
            ">
    </div>
  </div>
</div>

结果如下:

为什么它不能放大、居中和裁剪图像？

Answer 1

给图像一些尺寸(与没有定义尺寸的第二幅图像相比)

<div class="container" style="width: 800px">
  <div class="row">
    <div style="
      height:150px; 
      width: 250px; 
      overflow: hidden;
      border: 3px solid red;
      ">
      <img src="http://placekitten.com/400/200" style="
        width:100%;
        height:100%;
        object-position: center;
        object-fit: cover;
        ">
    </div>
  </div>
  <br>
  <div class="row">
    <div style="
      height:150px; 
      width: 250px; 
      overflow: hidden;
      border: 3px solid red;
      ">
      <img src="http://placekitten.com/400/200" style="
        object-position: center;
        object-fit: cover;
        ">
    </div>
  </div>
</div>