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

Question

我想拍摄一张随意的图片并让它向上/向下缩放以使用父div的整个空间，同时保持其原始比例。我希望裁剪图像（只要它在垂直和水平方向都居中），就可以了。

我已尝试过此代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果如下：

为什么它不能按比例放大，居中和裁剪图像？

Answer 1

为图像提供一些尺寸（与第二幅图像相比，没有定义的尺寸）

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

因此，如果您在CSS中使用 background-image：url（＆＃39; {path / url}＆＃39;）; ，那么您现在可以使用 background-size：封面; 或背景尺寸：包含;

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

  

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

     

包含：将图片缩放到最大尺寸，使其宽度和高度都适合内容区域

您还可以通过

控制图像居中的位置

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

我发现，当您的网站/应用需要响应时，封面会非常闪耀。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

请参阅此example，

.object-fit_fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.object-fit_contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-fit_cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fit_none {
  -o-object-fit: none;
     object-fit: none;
}

.object-fit_scale-down {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

html {
  color: #eee;
  padding: 30px;
  font-family: 'Source Code Pro', Monaco;
  background-color: #333;
}

p {
  font-weight: 200;
  font-size: 13px;
  margin-bottom: 10px;
  margin-top: 0;
}

img {
  height: 120px;
  background-color: #444;
}

img[class] {
  width: 100%;
}

.original-image {
  margin-bottom: 50px;
}

.image {
  float: left;
  width: 40%;
  margin: 0 30px 20px 0;
}
.image:nth-child(2n) {
  clear: left;
}
.image:nth-child(2n+1) {
  margin-right: 0;
}

<div class="original-image">
<p>original image</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png"> 
</div>

<div class="image">
  <p>object-fit: fill</p>
<img class="object-fit_fill" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: contain</p>
<img class="object-fit_contain" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: cover</p>
<img class="object-fit_cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: none</p>
<img class="object-fit_none" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
<img class="object-fit_scale-down" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
 </div>