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

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>

结果如下：

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

原文由 João Otero 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 sideroxylon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在处理各种尺寸的图像时，我总是选择在 CSS 中设置图像 URL 而不是 IMG 标签。 IMG 标签在告诉浏览器如何在容器中呈现它方面非常有限。在 CSS 中你有更大的控制权。

因此，如果您使用 背景图片：url(‘{path/url}’); 在您的 CSS 中，您现在可以使用 background-size: cover; 或 背景大小：包含；

 background-image: url('{path/url}')
background-size: cover;

cover ：将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内不可见

contain ：将图像缩放到最大尺寸，使其宽度和高度都能适应内容区域

您还可以通过以下方式控制图像的居中位置

image-position: center;    // or %50 %50 or 100px 10px, etc, etc

我发现当响应性是您的网站/应用程序的要求时， 封面 真的很闪耀。

 .image {
  background-image: url('http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg');
  height: 340px;
  background-repeat: no-repeat;
  background-position: center;
}

.image.contain {
  background-size: contain;
}

.image.cover {
  background-size: cover;
}

 <h3>Cover</h3>
<div class="container" style="width: 800px">
  <div class="row">
    <div style="
      height:340px;
      width: 100%;
      overflow: hidden;
      border: 3px solid red;
      ">
      <div class="image cover"></div>
    </div>
  </div>
</div>
<hr/>
<h3>Contain</h3>
<div class="container" style="width: 800px">
  <div class="row">
    <div style="
      height:340px;
      width: 100%;
      overflow: hidden;
      border: 3px solid red;
      ">
      <div class="image contain"></div>
    </div>
  </div>
</div>

原文由 flyer 发布，翻译遵循 CC BY-SA 3.0 许可协议