减少图像高度会导致使用 object-fit:cover 切割图像答案

【问题标题】：Reducing Image height results in cutting Image using object-fit:cover减少图像高度会导致使用 object-fit:cover 切割图像
【发布时间】：2017-06-28 10:28:15
【问题描述】：

我正在尝试在不拉伸图像的情况下降低图像高度。但它切割图像的底部。

尝试使用 Object cover : https://codepen.io/anon/pen/vZpLoZ

尝试使用容器：https://codepen.io/anon/pen/zzprgx

.cover {    
    object-fit: cover;    
}

&lt;img height="260px" width="290px" class="cover"  src='https://i.stack.imgur.com/zj631.png'&gt;

原图：

降低高度后的图像剪切图像的底部：

【问题讨论】：

object-fit: contain;
@Morpheus 谢谢，但现在如果我减小高度，宽度也会自动减小，从这个jsfiddle.net/oma1kxyb/37 到这个jsfiddle.net/oma1kxyb/36
如果高度减少图像将被拉伸，因为图像适用于纵横比。
contain 的作用是让图像适应其给定的空间并保持其纵横比。
ctrl + a 结果你可以看到它有相同的宽度。

标签： html css

【解决方案1】：

解决方案：

.clip {
    background: url("https://i.stack.imgur.com/CsblL.jpg");
    position:absolute;
    background-repeat: no-repeat;
    background-size: 400px 230px;
    padding-left: 140px;
    padding-top: 50px;
    border:none;
    clip: rect(50px,275px,198px,142px);
    left:-60px;
}

<div>
 <img src="https://i.stack.imgur.com/SIZYv.jpg" width="230"  height="230" />
 <img class="clip" width="150" height="150" />
</div>

【讨论】：

【解决方案2】：

object-fit 可以设置为以下五个值之一：

fill：这是拉伸图像以适应内容框的默认值，无论其纵横比如何。包含：增加或减小图像的大小以填充框，同时保持其纵横比。

cover：图像将填充其框的高度和宽度，再次保持其纵横比，但在此过程中经常裁剪图像。 none：图像将忽略父级的高度和宽度并保留其原始大小。

缩小：图像将比较none和contain之间的差异，以找到最小的具体对象大小。这是拉伸图像以适应内容框的默认值，无论其纵横比如何。

包含：增加或减小图像的大小以填充框，同时保持其纵横比。

覆盖：图像将填充其框的高度和宽度，再次保持其纵横比，但在此过程中经常裁剪图像。

无：图像将忽略父级的高度和宽度并保留其原始大小。

缩小：图像将比较none和contain之间的差异，以找到最小的具体对象大小。

所以如果你使用 CONTAIN .cover { object-fit: contain; } 而不是 COVER，你应该没问题。

其次当你使用容器时，你已经给了高度和宽度 100%。所以无论图像的纵横比是多少，图像都会取容器的高度和宽度。为此，您需要将属性之一设为自动。任何一个 .container img {width: auto; or height:auto;}

【讨论】：

此解决方案在容器高度固定时不起作用。你需要width:auto; height:auto; 而不仅仅是其中之一
抱歉，如果不使用body{ height: 150px; }，这将无法工作，当我在站点中使用body 时，它会出现一些其他问题......如果我增加高度，宽度也会增加...... .
请忽略前面的评论，看上面的答案。您不需要编辑正文，只需编辑.cover 或.container img，如我上面的回答中所述
现在我尝试.container img {width: auto; 为codepen.io/anon/pen/zzprgx 但当我增加或减少高度时，宽度也会根据高度变化.....
如果你想保持图像的纵横比不变，当你改变高度时，宽度会自动改变。这很明显。我不知道为什么这是个问题。

【解决方案3】：

我的答案适用于这两种情况。您不需要为图像指定固定的宽度或高度。

.cover {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%; 
}

Codepen link 更新

【讨论】：

抱歉，如果不使用body{ height: 150px; }，这将无法工作，当我在站点中使用body 时，它会出现一些其他问题......如果我增加高度，宽度也会增加...... .
@viCky 这不是不必要的。如果你给你的包装器宽度小于高度，那么你的 codepen 中的图像不正确

【解决方案4】：

您应该使用其他人提到的contain。只需发布我遇到的代码，它可能会对您有所帮助。参考：LINK

body {
  font-family: Avenir, sans-serif;
  margin: 0;
  text-align: center;
}

h1,
h2 {
  font-weight: 100;
}

section:nth-child(even) {
  background: #ccc;
}

#plain img {
  width: 45%;
  max-width: 300px;
  height: auto;
  margin: 2.5%;
}

section h1 {
  font-weight: 600;
  padding-top: 3rem;
}

code {
  font-family: inherit;
  font-weight: 100;
}

section img {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background: #eee;
}

section.contain img {
  object-fit: contain;
}

section.cover img {
  object-fit: cover;
}

section.none img {
  object-fit: none;
}

<h1>CSS object-fit</h1>
<section id="plain">
  <h1>original images</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
</section>

<section>
  <h1>Base style: <code>img { width: 200px; height: 200px; border: 1px solid; background: #eee; }</code></h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
  <h2>Images squished</h2>
</section>

<section class="contain">
  <h1>Base style + <code>img { object-fit: contain }</code></h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
  <h2>Images letterboxed, correct aspect ratio maintained</h2>
</section>

<section class="cover">
  <h1>Base style + <code>img { object-fit: cover; }</code></h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
  <h2>Images expand to cover width and height, correct aspect ratio maintained</h2>
</section>

<section class="none">
  <h1>Base style + <code>img { object-fit: none; }</code></h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
  <h2>Images expand to actual size, cropped inside set width and height, correct aspect ratio maintained</h2>
</section>

【讨论】：

您能否仅针对我面临的问题更新答案.....我在您的代码中尝试过，但我没有从该代码中得到任何解决方案.....
作为参考发布
我看到了你想做什么。如果你拉伸图像，它会看起来很丑。如果您适合图像，它将包含空格。但如果你有一个确切的尺寸作为所需的尺寸，那么它看起来没问题。
你尝试调整图像大小然后使用 -margins 吗？
你可以使用 fill 并使用 -margins 但是一些内容会被裁剪。

【解决方案5】：

只需删除height 并仅使用width，因为如果您减少height 而不是width，图像会拉伸。（你可以玩boxwidth查看。）

我发布了一个工作小提琴以更好地理解。

.box {
  width: 250px;
}

img.cover {
  width: 100%;
  object-fit: cover;
}

<div class="box">
  <img class="cover" src='https://i.stack.imgur.com/zj631.png'>
</div>

【讨论】：