Question

我在div标签中有一个img，目前正在使用CSS

img {
    max-height: 100%;
    max-width: 100%;
}

这目前使图像保持在div内，这正是我想要的。但是，如果图像文件小于div，则图像将不是最大尺寸。是否有一种简单的方法来最大化图像，同时又将图像保持在div内，并保持原始长宽比？

我尝试将高度设置为100％，最大宽度为100％，但这会使图像失真，这不是我想要的。我也尝试过object-fit: contain;，但这似乎无济于事。

谢谢：）

Answer 1

尝试将其添加为背景，然后您可以这样做：

div {
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Answer 2

@Michelangelo的答案是实现目标的另一种方法。如果您希望图像位于img标记内（例如原始帖子），请保留max-width和max-height值，并将其中之一放入CSS类：

1）保持纵横比基于宽度：

width: 300px; /* Your preferred width */
height: auto;

2）保持基于高度的长宽比：

width: auto;
height: 300px; /* Your preferred height */

我还建议您在此处查看object-fit属性： https://www.w3schools.com/css/css3_object-fit.asp

当您放置background-size或contain之类的值时，它有点像cover的属性，加上的是您可以指定width和height而不加复杂您的布局/ DOM层次结构。在处理元素的固有大小时，它非常方便。

Answer 3

如果要将图像保留为HTML元素而不是CSS背景，则可以使用object-fit。此CSS属性存在浏览器支持限制。

https://caniuse.com/#search=object-fit

您可以使用polyfill来解决这个问题。如： https://github.com/fregante/object-fit-images

一个我相信你追求的例子可能是： https://codepen.io/bin-man/pen/NWKNWLm

.image-container img {
  object-fit: cover; 
}

您可以尝试调整图像大小，并删除适合对象以查看其行为。

希望这会有所帮助。

Answer 4

我想这就是您所需要的...请运行代码段...

div {
  width: 100px;
  height: 100px;
}

div > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
}

<div>
  <img src="https://www.wellnesspetfood.com/sites/default/files/styles/blog_feature/public/media/images/6615505_950x400.jpg?itok=ylLXPrq6" />
</div>

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg" />
</div>

在保持宽高比的同时自动缩放图像

4 个答案: