CSS：100％的宽度或高度，同时保持宽高比？
目前，使用STYLE，我可以使用width: 100%和高度auto （反之亦然），但我仍然无法将图像限制在特定的位置，分别太宽或太高。
有任何想法吗？
如果您只在图像上定义一个维度，图像宽高比将始终保留。
图像比你更喜欢的更大/更高的问题？
你可以把它放在一个DIV中，该DIV被设置为图像所需的最大高度/宽度，然后设置overflow：hidden。 那会超出你想要的东西。
如果图像的宽度和宽度都是100％，并且您认为图像的高度太高，那是因为长宽比保持不变。 您需要裁剪或更改宽高比。
请提供更多关于你正在努力完成的内容的信息，我将尽力帮助更多！
—基于反馈编辑—
您是否熟悉最大宽度和最大高度属性？ 你可以随时设置这些。 如果您没有设置最小值，并且设置了最大高度和宽度，那么图像不会被扭曲（高宽比将被保留），并且不会大于最长和最大的图像。
几年后，寻找相同的要求，我发现一个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
通过将CSS max-width属性设置为100% ，图像将填充其父项元素的宽度，但不会呈现比实际大小更大的尺寸，从而保留分辨率。
将height属性设置为auto保持图像的height宽比，使用此技术可以使静态高度被覆盖，并使图像在所有方向上均呈比例弯曲。
img { max-width: 100%; height: auto; }
有同样的问题。 对我来说，问题在于高度属性也已经在其他地方定义了，如下所示：
.img{ max-width: 100%; max-height: 100%; height: inherit !important; }
简单优雅的工作解决
img { width: 600px; /*width of parent container*/ height: 350px; /*height of parent container*/ object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); }
简单的scheme：
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%);
它应该真的按预期工作:)
最好使用自动上应该尊重长宽比的尺寸。 如果你没有设置其他的属性为自动，大多数浏览器现在会假设你要尊重宽高比，但不是全部（例如，Windows Phone 8上的IE10不是）
width: 100%; height: auto;
其中一个答案包括background-size：包含 css语句，我非常喜欢这个语句，因为它直接声明了你想要做什么，而浏览器只是做它。
不幸的是，迟早你将需要应用一个阴影 ，不幸的是不能很好地与背景图像解决scheme发挥。
所以我们假设你有一个响应的容器，但是对于最小和最大的宽度和高度，它有明确的边界。
.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/
这是一个非常简单的解决scheme，我遵循康卡的链接，并考虑到背景大小。 它将图像吹起来，然后将其集中在外部容器中，而不是缩放它。
<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); />
我使用这个固定高度和宽度的矩形容器，但使用不同大小的图像。
img { max-width: 95%; max-height: 15em; width: auto !important; }
使用jQuery左右，因为CSS是一个普遍的误解（关于简单的devise目标这里无数的问题和讨论表明）。
CSS不可能做你所希望的事情：image的宽度应该是100％，但是如果这个宽度导致的高度过大，则应该使用最大高度 – 当然，正确的比例应该是保存。
不要跳进一个老问题，但…
#container img { max-width:100%; height:auto !important; }
即使这是不正确的，因为你在高度上使用！重要的覆盖，如果你使用像WordPress这样的CMS来为你设置高度和宽度，这个效果很好。
没有JS，这是不可能的，所以我写了一个小脚本：
var resize_images; resize_images = function(resize) { var images, resize_process, resize_single; if (resize == null) { resize = false; } resize_single = function(that) { if (that.height() <= 200) { return that.css({ 'width': 'auto', 'height': '100%' }); } else { return that.css({ 'width': '100%', 'height': 'auto' }); } }; resize_process = function(that) { that.css({ 'width': 'auto', 'height': 'auto' }); resize_single(that); return resize_single(that); }; images = $('.image img'); return images.each(function() { if (resize) { return resize_process($(this)); } else { return $(this).on('load', function() { return resize_process($(this)); }).each(function() { if(this.complete) $(this).trigger('load'); }); } }); }; resize_images(); $(window).resize(function() { return resize_images(true); });
CoffeeScript
和scss：
.image { position: relative; overflow: hidden; width: 50%; height: 200px; float: left; img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }
您仍然必须坚持父块的宽度或高度。 如果代码的大小小于父块的大小，那么这个代码将高档的图像。
jsfiddle.net
我想这就是你要找的东西，我一直在找我的自我，但是后来我又记住了，因为我find了代码。
background-repeat: repeat-x; background-position: top; background-size:auto; background-attachment: fixed;
数字进化正在进行中。
