Question

我有一个已知大小的div和一个随机大小的图像的链接，我想在这个div中显示。我希望图像具有比例缩放，与posible一样大，但不大于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%;
}

Answer 2

这是一个javascript方法，用于计算图像和容器的纵横比，并设置首先到达边缘的相应高度或宽度值，然后图像按比例缩放其他维度：

// pre-cache image
var img1 = new Image();
img1.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";
var img2 = new Image();
img2.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";

function placeImage(imgObj, containerID) {
    var container = $(containerID);
    var imageAspectRatio = imgObj.height / imgObj.width;
    var containerAspectRatio = container.height() / container.width();
    // figure out which dimension hits first and set that to match
    if (imageAspectRatio > containerAspectRatio) {
        imgObj.style.height = container.height() + "px";
    } else {
        imgObj.style.width = container.width() + "px";
    }
    container.append(imgObj);

}

$("#go").click(function() {
    placeImage(img1, "#container1");
    placeImage(img2, "#container2");
});

你可以在这个jsFiddle中看到它：http://jsfiddle.net/jfriend00/5K3Zf/

比例图像缩放

2 个答案: