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

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