适应图片到父级 div 的尺寸

22 浏览
0 Comments

适应图片到父级 div 的尺寸

我创建了一个与浏览器窗口大小相等的div（div1）。然后，我在父div（div1）内创建了另一个div（div2）。然后，我在第二个div（div2）中放置了一张图片。我的浏览器窗口大小是1360X638，图片大小是1600*1200。

我希望图片能够根据父div（div1）的大小自适应。因此，这张比窗口大小大的图片必须适应第二个div（div2），它与窗口大小相等，并且这张图片将完全适应div的大小（因此，在显示中没有滚动或裁剪图片）。

我搜索了一段时间。我找到的解决方案是将最大高度和宽度设置为100%。我已经这样做了。

我写了这部分代码：

输出如下：

Enter image description here

您可以看到右侧有一个滚动条。我不希望有这个滚动条。

0

1 答案

0 Comments

问题的原因是需要将图片的尺寸适应父级div的大小。解决方法是使用jQuery来根据视口的宽高比选择正确的CSS规则。

首先，在HTML中有一个包含图片的div容器，如下所示：

然后，可以使用以下CSS规则来将图片的尺寸调整为视口的大小（浏览器宽度或高度的100%）：

html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
    width: 100%;
    background-color: red;
    text-align: center; /* 可选 */
}
.container img {
    vertical-align: top;
}
.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

为了根据视口的宽高比选择正确的CSS规则，可以使用以下jQuery方法：

function resizeImg() {
    var thisImg= $('.container');
    var refH = thisImg.height();
    var refW = thisImg.width();
    var refRatio = refW/refH;
    var imgH = thisImg.children("img").height();
    var imgW = thisImg.children("img").width();
    if ( (imgW/imgH) > refRatio ) { 
        thisImg.addClass("portrait");
        thisImg.removeClass("landscape");
    } else {
        thisImg.addClass("landscape");
        thisImg.removeClass("portrait");
    }
}
$(document).ready(resizeImg())
$(window).resize(function(){
    resizeImg();
});

以上就是解决该问题的方法。可以参考以下链接获取演示示例：

[Demo fiddle](http://jsfiddle.net/audetwebdesign/y2L3Q/)

参考资料：

- [Make image fill div completely without stretching](https://stackoverflow.com/questions/16739908/16740542#16740542)

0