避免在CSS中拉伸图像

Question

我正将一个图片渲染到一个div中，我想避免我的图片被拉伸。

div {
  height: 300px;
  width: 300px; 
}
img {
  min-width: 300px;
  min-height: 300px;
  max-height: 300px;   
}

我的问题是我的图片宽度被拉伸了。我希望它保持常规宽度，即使部分图像会缺失。

div {
  height: 300px;
  width: 300px; 
  overflow: hidden;
}
img {
  height: 300px
  max-width: none;
  min-width: 300px;
}

- Zincktest

---

你设置了 min-width，这意味着最小宽度为 300px。你是不是想用 max-width？ - Cezary Wojcik

我的图像需要至少300像素宽度，以填充整个div。 - Zincktest

图像的尺寸是多少？ - snumpy

@user2231285，我的和Ekaterina的答案都会给你这个。 - snumpy

@user2231285 请上传一张截图。我们似乎都不确定你实际想要什么。 - snumpy

Answer 1

你只需要简单地添加object-fit: cover;即可实现此功能。例如：

img {
    height: 300px
    width: 100%;
    object-fit: cover;
}

- Al Amin

---

如果您想保留最小/最大宽度和高度，这是一个不错的解决方案，对于像将英雄图像设置为100vh这样的事情非常有用。我还发现在Safari压缩我的图像而其他浏览器没有的情况下，这也很有帮助。 - Pwpwpw

注意：IE11不支持object-fit。 - Neurotransmitter

IE已死.... 微软作为互联网浏览器的黄金标准多年后，正在逐步淘汰Internet Explorer，官方于2021年8月17日停止支持。 - Gass

只是对@Gass评论的一个补充说明，自2022年6月15日起，IE已经被淘汰。 - Studocwho

@Studocwho RIP IE - Gass

Answer 2

我建议不要设置最小高度和最大高度，只需将高度设置为300像素，并在

标签上加上“overflow:hidden”属性。这样，无论图像大小如何，它始终保持比例，永远不会超出

标签的边界。

div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }

- ZombieCode

Answer 3

如果您想避免拉伸图像且保持原始宽度，最简单的方法是将图像作为div背景。

- Shomz

Answer 4

为了让它更加灵活，不仅使用300像素，可以使用以下方式： 图片 { 宽度：100％； object-fit：cover; }

高度会自动调整。

- Vincent

Answer 5

为了避免图像调整大小，请使用以下代码：

object-fit: none;

关于object-fit的更多信息

CSS object-fit属性用于指定如何调整图像或视频以适应其容器大小。

该属性告诉内容以各种方式填充容器，例如“保留纵横比”或“拉伸并尽可能占据空间”。

Object-fit的取值

• fill：默认值。图像被缩放以填满给定的维度。必要时，图像将被拉伸或压缩以适应。
• contain：图像保持其纵横比但按比例缩小或放大以适应给定的维度。
• cover：图像保持其纵横比并填充给定的维度。图像将被裁剪以适合。
• none：图像不会被调整大小，scale-down - 图像被缩小到none或contain的最小版本。

更多信息和示例

- Gass

---

哦，谢谢，你是我的英雄 :D - undefined

Answer 6

使用max-width代替min-width，只需将height设置为300px（或仅使用max-height）。

- justisb

Answer 7

只需指定max-width为100％和height：auto即可。

- Jyothish Kumar

Answer 8

你可以使用overflow:hidden来隐藏图像在div宽度之外的任何部分。

div {
       height: 300px;
       width: 300px; 
       overflow: hidden;
    }
img {
       /*min-width: 300px;*/
       height: 300px;   
    }

- snumpy

Answer 9

我在这里补充一下之前的回答，因为有些回答比如添加width:100% height:auto等仍然会在某些情况下使图像被拉伸或变得模糊。让我解释一下。

我经常在电子商务网站上添加产品等，图像拉伸/模糊总是一个问题。大多数情况下，缩小图像并不是太大的问题，所以像width:100%; height:auto;等的回答就可以正常工作。但是，如果图像容器的宽度大于图像的本来/正常宽度，则会出现问题。

例如，如果您有一个宽度为100px的图像和一个宽度为200px的div容器，如果您随意添加width:100%和height:auto;到您的图像中，这不会在技术上“拉伸”图像，但它会使它看起来模糊，因为您将图像拉伸超过了其正常宽度。

为了解决这个问题，我通常会做类似于这样的事情，假设在桌面上，您想要以其100％本来宽度显示图像而没有任何缩放/拉伸/模糊，我会做以下操作：

img{
  display:block;
  margin:0px auto;
  width: initial;
  height: auto;
}

使用此方法可以让我的图像保持原始宽度，不进行任何缩放。但是当图像在较小的设备上查看时，我会将相同的规则块添加到媒体查询中，并执行以下操作：

@media all and (max-width: 1200px){
  img{
    width:100%;
    height:auto;
  }
}

这实际上是在说：“嘿，图片，让我的图片从点A到点B（移动设备）响应式，但一旦你从点B到点C（小型笔记本电脑到桌面电脑，图像适合正常显示且不需要拉伸），则将宽度设置为其默认本地宽度。”

希望这可以帮助大家。祝大家编程愉快。

- somdow

Answer 10

在给图像指定固定高度和宽度之后，我添加了以下的 object-fit 属性：

img {
  width: 300px;
  height: 300px;
  object-fit: contain;
}

- Mundruku