在保持纵横比的同时自动缩放图像答案

【问题标题】：Automatically scale image while keeping aspect ratio在保持纵横比的同时自动缩放图像
【发布时间】：2019-08-14 23:58:23
【问题描述】：

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

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

这目前使图像适合 div，这正是我想要的。但是，如果图像文件比 div 小，则图像不会是它可以达到的最大尺寸。有没有一种简单的方法来最大化图像，同时将图像保持在 div 内，并保持原始纵横比？

我尝试将高度设置为 100%，最大宽度为 100%，但这会扭曲图像，这不是我想要的。我也试过object-fit: contain;，但这似乎没有任何作用。

谢谢:)

【问题讨论】：

max-width 将图像限制为图像原始宽度的 100%。这意味着，如果您的图像宽度为 400 像素，而 div 的宽度为 600 像素，则图像不会填满 div 的整个宽度，因为它只能拉伸到 400 像素，因为max-width。你们中的任何一个都是固定宽度/高度的 DIV 吗？
所有 div 都根据屏幕大小调整大小。它确实可以正常工作，只要图像的分辨率较小，它就不会按预期工作，或者如果某人的屏幕很大。

标签： html css

【解决方案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;
}

【讨论】：

不知道为什么这被否决了？没错，只需要定义宽度和高度。
如果您要制作背景图片，这很好用，但如果是一般用途的图片，如个人资料照片、图片库等，则效果不佳。尤其是通过 CMS 放置图片时。
我假设您将background-size: cover; 放在哪里，它应该是contain？无论如何，我尝试了这个，似乎它认为 div 比实际大，所以图像的顶部和底部仍然没有显示。在 Chrome DevTools 中，它显示 div 的大小是正确的，但图像没有以这种方式显示。这个 div 在引导轮播中可能是有用的信息。
@RobertClarke 不，封面将按原样保持图像纵横比并在某些分辨率下截断。这就是权衡。
@JamesAllen 我不知道。鉴于信息，这是我可以提供的解决方案，效果很好。对于无法拉伸的图像，就像：你不能吃蛋糕也不能吃:)

【解决方案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

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

【讨论】：

我不想为图像设置任何绝对值，我希望它能够完全响应，并针对任何屏幕调整大小。我也尝试了 object-fit，但它什么也没做，不知道为什么
您可以在width 和height 属性中放置任何允许的CSS 值。您甚至可以将calc 作为值。看这里：w3resource.com/css/CSS-values.php

【解决方案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; 
}

您可以调整图像大小并移除对象匹配以查看其行为方式。

希望这会有所帮助。

【讨论】：

【解决方案4】：

我想这就是你需要的...请运行代码 sn-p...

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>

【讨论】：