html - div 内的 img 应填充宽度或高度

Question

我有一个包含图像的div

<div class="logo-wrapper">
    <img src="img/logo.jpg">
</div>

和以下 CSS:

.logo-wrapper {
   width: 197px;
   height: 78px;
   position: relative; 
}

img {
   bottom: 0;
   display: block;
   height: 100%; /* this */
   width: 100%; /* or this, depending on image ratio */
   margin: auto;
   position: absolute;
   top: 0
}

.logo-wrapper 中的图像是动态生成的，每个图像都有不同的比例。我打算做的是根据图像的尺寸填充 img 是否在其父级的 height 或 width 中。我可以用背景图片代替，但我不想在旧的 IE 上遇到麻烦。那么有没有人有一个解决方案，img 根据其比例采用高度或宽度？

Answer 1

如果图片大于.logo-wrapper，可以使用

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

如果没有，它就不会增长，但这样你就不会有模糊的图像。