CSS对象适合封面正在拉伸图像答案

【问题标题】：CSS object fit cover is stretching imageCSS对象适合封面正在拉伸图像
【发布时间】：2018-06-18 17:01:32
【问题描述】：

CSS 对象适合位置 fill、contain 正在工作，但 cover 的工作方式类似于 fill。无论图像的多少部分是cover，它都必须不拉伸填充div。我将 div 设置为 flex 并将 object fit position 应用于 div 内部的图像。为什么cover 不起作用？如果我在px 中设置高度来显示它的工作原理，但图像必须根据div 调整大小，所以我设置高度auto

<html>
<head>
<style>
.left{
  float:left;
}
.col100{
  width:100%; 
 }
.col33{
  width:33%;
}
.h30{
  height:30vw; 
 }
 .mright10{
  margin-right:10px;
 }
.bgred{
  background:red;
 }
 .bold{
  font-weight:bold;
 }
 .cover{
  object-fit: cover;
 }
.contain{
  object-fit: contain;
 }
.fill{
  object-fit: fill;
 }
 .flex{
  display:flex;
 }
</style>
</head>
<body>
<div class="left col33 mright10">
<p class="left col100">Original Size</p>
<section class="col100 left h30 bgred">
  <img class="col100" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100">contain</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover contain" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33 mright10">
<p class="left col100">fill</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover fill" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100 bold">Cover - but image is being stretched !</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover cover" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

</body>
</html>

【问题讨论】：

我认为图片需要一个高度值。
@sol，图片必须根据div调整大小，所以我设置高度自动
@locateganesh，请在标记之前先阅读问题，您提供的链接涉及image，其中有static height，但我已将auto 设置为高度，因为Image 必须是responsive 并根据 div 调整大小。如果我将px 设置为高度，它可以工作，但我需要responsive 图像。
如果你仔细看object-fit: cover; 图像没有被拉伸。请参阅完整页面中的 sn-p。

标签： css object-fit

【解决方案1】：

为此，最好使用背景图像 div，这样可以保留图像尺寸。请在下面的 sn-p 中找到我的 background-image 课程！我希望这会有所帮助。

.left{
  float:left;
}
.col100{
  width:100%; 
 }
.col33{
  width:33%;
}
.h30{
  height: 30vw;
 }
 .mright10{
  margin-right:10px;
 }
.bgred{
  background:red;
 }
 .bold{
  font-weight:bold;
 }
 .cover{
  object-fit: cover;
 }
.contain{
  object-fit: contain;
 }
.fill{
  object-fit: fill;
 }
 .flex{
  display:flex;
 }
 .background-image {
  background-image: url('https://www.gstatic.com/webp/gallery/1.sm.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="left col33 mright10">
<p class="left col100">Original Size</p>
<section class="col100 left h30 bgred">
  <img class="col100" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100">contain</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover contain" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33 mright10">
<p class="left col100">fill</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover fill" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100 bold">Cover - no longer stretched !</p>
<section class="col100 left h30 bgred flex background-image">
  
</section>
</div>

【讨论】：

感谢您的回答，我曾考虑过 css background-image，但 images 会生成 dynamically。如果找到clean solution 然后在css 中插入php 会更好
嗯，好的，干净的解决方案是什么意思？另一种可能性是，您可以直接在 html 中添加包含背景图像 url 的 <style> 属性，如果您的问题是在 css 文件中有 url 位置。