缩放图像以适合边框

Question

是否有仅css的解决方案将图像缩放到边框（保持纵横比）？如果图像大于容器，则此方法有效：

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

Answer 1

不，没有唯一的CSS双向方式可以做到这一点。您可以添加

.fillwidth {
    min-width: 100%;
    height: auto;
}

对于一个元素，使其始终具有100％的宽度，并自动将其高度缩放为长宽比， 或 反之：

.fillheight {
    min-height: 100%; 
    width: auto;
}

始终缩放到最大高度和相对宽度。为此，您需要确定纵横比是高于还是低于容器，而CSS无法做到这一点。

原因是CSS不知道页面的外观。它会预先设置规则，但只有在此之后，元素才会被渲染，并且您确切知道要处理的大小和比率。检测到该错误的唯一方法是使用JavaScript。

尽管您并不是在寻找JS解决方案，但如果有人需要，我还是会添加一个。用JavaScript处理此问题的最简单方法是根据比率差异添加一个类。如果框的宽高比大于图像的宽高比，请添加类“
fillwidth”，否则添加类“ fillheight”。

$('div').each(function() {

  var fillClass = ($(this).height() > $(this).width())

    ? 'fillheight'

    : 'fillwidth';

  $(this).find('img').addClass(fillClass);

});


.fillwidth {

  width: 100%;

  height: auto;

}

.fillheight {

  height: 100%;

  width: auto;

}



div {

  border: 1px solid black;

  overflow: hidden;

}



.tower {

  width: 100px;

  height: 200px;

}



.trailer {

  width: 200px;

  height: 100px;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tower">

  <img src="http://placekitten.com/150/150" />

</div>

<div class="trailer">

  <img src="http://placekitten.com/150/150" />

</div>