Question

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

尝试使用 Object Cove r：https://codepen.io/anon/pen/vZpLoZ

＆＃13;

.cover {    
    object-fit: cover;    
}

＆＃13;

<img height="260px" width="290px" class="cover"  src='https://i.stack.imgur.com/zj631.png'>

＆＃13;

原始图片：

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

Answer 1

我的回答适用于这两种情况。您无需为图像提供固定的宽度或高度。

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

Codepen link已更新

Answer 2

object-fit 可以使用以下五个值之一进行设置：

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

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

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

包含：增加或减少图像的大小以填充框，同时保留其宽高比。

封面：图片将填充其包装盒的高度和宽度，再次保持其宽高比，但通常会在此过程中裁剪图像。

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

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

因此，如果您使用CONTAIN .cover { object-fit: contain; }而不是COVER，那么您应该没问题。

其次当您使用容器时，您已经给出了100％的高度和宽度。因此，无论图像的宽高比是多少，图像都将占据容器的高度和宽度。为此，您需要将其中一个属性设置为auto。或 .container img {width: auto; or height:auto;}

Answer 3

您应该使用其他人提到的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>

Answer 4

只需删除height并仅使用width，因为如果您缩小height，则不会width图像会延长。（您可以使用box width进行检查。）

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

解决方案：

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

降低图像高度会导致使用物体贴合切割图像：封面

5 个答案: