CSS: 100%的宽度或高度，同时保持纵横比?

如果你只在一个图像上定义一个维度，图像的纵横比将始终保持。

问题是图像比你喜欢的更大/更高吗?

你可以把它放在一个DIV中，这个DIV被设置为你想要的图像的最大高度/宽度，然后设置overflow:hidden。那样会把你想要的东西都剪掉。

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

请提供一些关于你具体想要完成的事情的更多信息，我会尽量帮助更多!

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

你熟悉max-width和max-height属性吗?你可以设置这些。如果你没有设置任何最小值，你设置了最大高度和宽度，那么你的图像将不会失真(纵横比将被保留)，它将不会比最长的维度大。

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

将height属性设置为auto可以保持图像的纵横比，使用这种技术可以覆盖静态高度，并使图像能够在各个方向上按比例伸缩。

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

几年后，在寻找同样的需求时，我发现了一个使用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

这是一个非常直接的解决方案，我提出后，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); />

最好在应该尊重纵横比的尺寸上使用auto。如果你没有将另一个属性设置为auto，现在大多数浏览器会假设你想要尊重纵横比例，但不是所有的浏览器都这样(例如，windows phone 8上的IE10就不这样)。

width: 100%;
height: auto;

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

用CSS做你想做的事情是不可能的:图像的宽度应该是100%，但如果这个宽度导致高度太大，max-height应该应用-当然正确的比例应该被保留。

我想这就是你要找的东西，我自己也在找，但在我找到密码之前我又想起来了。

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

数字进化正在进行中。

也有同样的问题。对我来说，问题是高度属性也已经在其他地方定义，像这样固定它:

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

我不是想翻旧账，但是…

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

即使这是不合适的，因为你使用!重要的覆盖高度，如果你使用CMS，如WordPress，为你设置高度和宽度，这工作得很好。

其中一个答案包括background-size:包含 css语句，我很喜欢它，因为它是你想要做的事情的直接语句，浏览器就会做它。

不幸的是，迟早你将需要应用影子，不幸的是，它不会很好地与背景图像解决方案。

因此，假设你有一个容器响应，但它的最小和最大宽度和高度有很好的界限。

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

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

img还应该定义一个max-width为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/

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

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

简单的解决方案:

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%);

它应该真的像预期的那样工作:)

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

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

现在可以使用vw和vh单元，它们分别代表__abc2viewport的width和height的1%。

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

举个例子:

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

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