CSS：在保持纵横比的同时保持 100% 的宽度或高度？

Question

目前，使用 STYLE，我可以在高度上使用 width: 100% 和 auto（反之亦然），但我仍然无法将图像分别限制在特定位置，无论是太宽还是太高.

有什么想法吗？

Answer 1

如果您只在图像上定义一个维度，则图像纵横比将始终保持不变。

图片比您喜欢的更大/更高的问题吗？

你可以把它放在一个 DIV 中，该 DIV 设置为你想要的图像的最大高度/宽度，然后设置溢出：隐藏。这将裁剪超出您想要的任何内容。

如果图像的宽度和高度为 100%:auto，而您认为它太高，那具体是因为保留了纵横比。您需要裁剪或更改纵横比。

请提供更多关于您具体要完成的工作的信息，我会尽力提供更多帮助！

--- 根据反馈进行编辑 ---

您熟悉max-width 和max-height 属性吗？你总是可以设置那些。如果您没有设置任何最小值并且设置了最大高度和宽度，那么您的图像将不会失真（将保留纵横比），并且它不会大于最长并达到其最大值的任何尺寸。

Answer 2

几年后，在寻找相同的要求时，我发现了一个使用 background-size 的 CSS 选项。

它应该可以在现代浏览器 (IE9+) 中运行。

<div id="container" style="background-image:url(myimage.png)">
</div>

还有风格：

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

参考：http://www.w3schools.com/cssref/css3_pr_background-size.asp

还有演示：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Answer 3

通过将 CSS max-width 属性设置为 100%，图像将填充其父元素的宽度，但不会呈现大于其实际大小，从而保留分辨率。

将height 属性设置为auto 可保持图像的纵横比，使用此技术允许覆盖静态高度并使图像在所有方向上按比例弯曲。

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

Answer 4

简单优雅的工作解决方案：

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 5

有同样的问题。对我来说问题是 height 属性也已经在别处定义了，像这样修复它：

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Answer 6

简单的解决方案：

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

顺便说一句，如果你想在一个父 div 容器中居中，你可以添加那些 css 属性：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

它应该真的按预期工作:)

Answer 7

其中一个答案包括我非常喜欢的 background-size: contains css 语句，因为它直接说明了您想要做什么，而浏览器就是这样做的。

很遗憾，您迟早会需要应用 阴影，但不幸的是，它不能很好地与背景图像解决方案配合使用。

假设您有一个响应式的容器，但它有明确定义的最小和最大宽度和高度边界。

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

并且容器有一个img，它必须知道容器高度的像素，以避免得到一个非常高的图像溢出或被裁剪。

img 还应该定义 100% 的最大宽度，以便首先允许渲染更小的宽度，其次是基于百分比，这使其成为参数。

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

请注意，它有一个漂亮的阴影；）

在这个小提琴中享受一个活生生的例子：http://jsfiddle.net/pligor/gx8qthqL/2/

Answer 8

我将它用于高度和宽度固定但图像大小不同的矩形容器。

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

Answer 9

最好在应该尊重纵横比的维度上使用 auto。如果您不将其他属性设置为自动，现在大多数浏览器会假定您想要尊重纵横比，但不是所有的（例如，Windows Phone 8 上的 IE10 就不会）

width: 100%;
height: auto;

Answer 10

这是我在关注 conca 的链接并查看背景大小后提出的一个非常简单的解决方案。它会放大图像，然后将其居中放置在外部容器中而无需缩放。

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Answer 11

不要跳入老问题，而是...

#container img {
      max-width:100%;
      height:auto !important;
}

即使在您使用 !important 覆盖高度时这不合适，但如果您使用 WordPress 等 CMS 为您设置高度和宽度，这很有效。

Answer 12

现在可以使用 vw 和 vh 单位，它们代表 viewport 的 width 和 h8 的 1%分别。

https://css-tricks.com/fun-viewport-units/

所以，例如：

img {
  max-width: 100vw;
  max-height: 100vh;
}

... 将使图像尽可能宽，同时保持纵横比，但不会更宽或高于视口的 100%。

Answer 13

使用 JQuery 左右，因为 CSS 是一种普遍的误解（这里关于简单设计目标的无数问题和讨论表明了这一点）。

CSS 不可能做你想做的事：图像的宽度应为 100%，但如果此宽度导致高度太大，则应应用最大高度 - 当然是正确的应保留比例。

Answer 14

我想这就是你要找的东西，我自己也在找，但后来我又想起了它，因为我找到了代码。

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

数字化发展正在进行中。