比例图像缩放

Question

我有一个已知大小的div和一个随机大小的图像的链接,我想在这个div中显示.我希望图像具有比例缩放,与posible一样大,但不大于div(图像宽度应该等于div的宽度或图像高度应该等于div的高度,但我不知道哪个情况) .

我怎么能只用html,css,javascript和jquery呢？而不是阅读图像大小会很棒.

Answer 1

您可以通过设置max-width和max-height100%来使用纯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%;
}