使用CSS按比例更改图像大小？
我一直在尝试几天来configuration我的缩略图库，所以所有的图像显示相同的高度和宽度。 但是，当我改变的Css代码，
max-height: 150px; max-width: 200px; width: 120px; height: 120px; 我得到的图像大小完全相同，但长宽比却被拉长，破坏了图像。 有没有办法调整图像容器，而不是图像？ 让我保持高宽比。 但仍然调整图像的大小。 （我不介意我是否切断了一些图像。）
提前致谢！
这是CSSresize的一个已知的问题，除非所有的图像具有相同的比例，你没有办法通过CSS来做到这一点。
最好的办法是有一个容器，并调整其中一个维度（总是相同的）的图像。 在我的例子中，我调整了宽度。
如果容器有一个指定的尺寸（在我的例子中的宽度），当告诉图像的宽度为100％时，它将使它成为容器的整个宽度。 高度自动会使图像具有与新宽度成比例的高度。
例如：
HTML：
<div class="container"> <img src="something.png" /> </div> <div class="container"> <img src="something2.png" /> </div>
CSS：
.container { width: 200px; height: 120px; } /* resize images */ .container img { width: 100%; height: auto; }
您需要修复一面（例如高度）并将另一面设置为auto 。
例如
height: 120px; width: auto;
这将仅基于一方来缩放图像。 如果发现可以接受的图像裁剪，您可以设置
overflow: hidden;
到父元素，这将会出现任何超出其大小的东西。
你可以使用object-fit css3属性，就像
<!doctype html> <html> <head> <meta charset='utf-8'> <style> .holder { display: inline; } .holder img { max-height: 200px; max-width: 200px; object-fit: cover; } </style> </head> <body> <div class='holder'> <img src='meld.png'> </div> <div class='holder'> <img src='twiddla.png'> </div> <div class='holder'> <img src='meld.png'> </div> </body> </html>
为了使图像可调/灵活，你可以使用这个：
/* fit images to container */ .container img { max-width: 100%; height: auto; }
把它作为你的持有人的背景，例如
<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;"> </div>
这将会把你的图像放在一个120×120的div里面，把图像的多余部分切掉
如果你知道的比例你可以使用填充底部百分比来设置高度取决于差异。
<div> <div style="padding-bottom: 33%;"> i have 33% height of my parents width </div> </div>
