我如何适应一个图像（img）的div内，并保持高宽比？
我有一个48×48的div，里面有一个img元素，我想适合它的div不失去任何部分，同时保持比例，是可以实现使用HTML和CSS？
如果您在编写CSS时不知道图像的尺寸，则需要使用一些JavaScript来防止裁剪。
HTML和JavaScript
<div id="container"> <img src="something.jpg" alt="" /> </div> <script type="text/javascript"> (function() { var img = document.getElementById('container').firstChild; img.onload = function() { if(img.height > img.width) { img.height = '100%'; img.width = 'auto'; } }; }()); </script> CSS
#container { width: 48px; height: 48px; } #container img { width: 100%; }
如果您使用JavaScript库，则可能需要利用它。
使用max-height:100%; max-width:100%; max-height:100%; max-width:100%; 为div内的图像。
不幸的是，最大宽度+最大高度不能完全覆盖我的任务…所以我find了另一个解决scheme：
要在缩放时保存图像比例 ，您还可以使用object-fit CSS3 object-fit 。
有用的文章： 用CSS3控制图像宽高比
img { width: 100%; /* or any custom size */ height: 100%; object-fit: contain; }
坏消息：IE不支持（ 我可以使用 ）
仅使用CSS：
div > img { width: auto; height : auto; max-height: 100%; max-width: 100%; }
HTML
<div> <img src="something.jpg" alt="" /> </div>
CSS
div { width: 48px; height: 48px; } div img { display: block; width: 100%; }
这将使图像展开来填充它的父母，其大小设置在div CSS中。
我遇到了很多问题，我发现每一个解决scheme似乎都不起作用。
我意识到，我必须设置div显示flex，所以基本上这是我的CSS：
div{ display: flex; } div img{ max-height: 100%; max-width: 100%; }
将照片设置为背景图片可以让我们更好地控制尺寸和位置，使img标签可以用于不同的目的…
下面，如果我们希望div与图片具有相同的长宽比，那么placeholder.png是一个与photo.jpg长宽比相同的小透明图片。 如果照片是正方形，则是1px x 1px占位符，如果照片是video缩略图，则是16×9占位符等。
具体到这个问题，使用一个1×1的占位符来保持div的方形比例，使用background-size的背景图片来保持照片的宽高比。
我用background-position: center center; 所以照片将在div中居中。 （在垂直中心或底部alignment照片会使img标签中的照片变得丑陋）。
div { background: url(photo.jpg) center center no-repeat; background-size: contain; width: 48px; // or a % in responsive layout } img { width: 100%; } <div><img src="placeholder.png"/></div>
要避免多余的http请求， 请将占位符图像转换为data：URL 。
<img src="data:image/png;base64,..."/>
你可以使用“img-fluid”类来获得更新的版本，比如Bootstrap v4 。
并可以使用Bootstrap v3等较旧版本的“img-responsive”类。
用法 ： –
img标签： –
class = “img-fluid”
src = “…”
