正确缩放图像但适合 div

Question

我正在制作一个图片库。这是图像的 HTML：

<div style="width: 84%; height: 100%; float: left; text-align: center;"><img
id="mainimage" style="height: 100%;" 
src="http://www.gymheroapp.com/workouts/img/spinner.gif"/></div>
<!-- Loading spinner is temp image, will be replaced by Javascript later -->

当图像为正方形或宽度不大于高度时，它可以正常工作。但是，当宽度太大时它会中断。图片溢出示例：

有没有办法检查我的 Javascript 中是否存在溢出？像这样的：

image.setAttribute('height', '100%')
image.removeAttribute('width')
if (image.isOverflowing()) {
    image.setAttribute('width', '100%')
    image.removeAttribute('height')
}

更好的是，有什么方法可以正确缩放图像但使其与包含的div相匹配？

Answer 1

jquery example

最适合：

$('img').on('load',function(){
    var css;
    var ratio=$(this).width() / $(this).height();
    var pratio=$(this).parent().width() / $(this).parent().height();
    if (ratio<pratio) css={width:'auto', height:'100%'};
    else css={width:'100%', height:'auto'};
    $(this).css(css);
});

编辑以说明图像在缓存中的位置

$('img').on('bestfit',function(){
    var css;
    var ratio=$(this).width() / $(this).height();
    var pratio=$(this).parent().width() / $(this).parent().height();
    if (ratio<pratio) css={width:'auto', height:'100%'};
    else css={width:'100%', height:'auto'};
    $(this).css(css);
}).on('load', function(){
    $(this).trigger('bestfit');
}).trigger('bestfit');

Answer 2

这是一个简单的 CSS 解决方案：

html, body { height: 100%; }
#gallery { height: 100%; width: 100%; position: relative; }

#gallery img {
  /* CSS Hack will make it width 100% and height 100% */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  /* Maintain aspect ratio */
  max-height: 100%;
  max-width: 100%;
}

<div id="gallery">
  <img src="http://cl.vvmonnickendam.nl/files/large/87" alt="Awesome blabla gedoe">
</div>

Fiddle example