javascript - 比例图像缩放

Question

我有一个已知大小的 div 和一个指向一些随机大小的图像的链接，我想在这个 div 中显示它。我希望图像具有比例缩放，尽可能大，但不大于 div(图像宽度应等于 div 的宽度或图像高度应等于 div 的高度，但我不完全知道哪种情况) .

我怎么能只使用 html、css、javascript 和 jquery 来做呢？最好不要读取图像大小。

Answer 1

您可以通过将 max-width 和 max-height 设置为 100% 来使用纯 CSS 来完成此操作。这是一篇关于该主题的好文章:http://unstoppablerobotninja.com/entry/fluid-images .本文还讨论了如何处理旧版本的 IE。

这是 CSS 的一个例子 - http://jsfiddle.net/JamesHill/R7bAA/

HTML

<div id='div1'>
    <img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>
<br />
<div id='div2'>
    <img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>

CSS

#div1
{
    height:100px;
    width:200px;
    background-color:Gray;
    border: 1px solid Black;
}
    #div2
{
    height:500px;
    width:100px;
    background-color:Gray;
    border: 1px solid Black;
}
.myImageClass
{
    max-height:100%;
    max-width:100%;
}