5

我做了一个div（div1），等于浏览器窗口大小。然后我在父 div (div1) 中创建了另一个 div (div2)。然后我在第二个 div (div2) 中放置了一个图像。我的浏览器窗口大小是 1360X638，我的图像大小是 1600*1200。

我希望图像根据父 div 的 (div1) 大小适合自己。所以图像（大于窗口大小）必须适合第二个 div（div2），它等于窗口大小），并且这个图像将完全适合 div 的大小（所以，没有任何滚动或裁剪显示中的图像）。

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

我写了这部分：

<div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;">
    <div style="max-height: 100%; max-width: 100%;">
        <img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" />
    </div>
</div>

输出是这样的：

在此处输入图像描述

您可以看到右侧有一个滚动条。我不想在那里。

4

1 回答 1

9

jQuery 解决方案 - 概念证明

假设您有以下HTML：

<div class="container">
    <img src="http://placehold.it/1600x1200" />
</div>

您可以应用以下CSS规则来调整图像大小以适应视口（浏览器宽度或高度的 100%）：

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

.landscape img {
    height: 100%;
}

使用以下jQuery方法根据视口的纵横比选择正确的 CSS 规则：

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();
});

演示小提琴：http: //jsfiddle.net/audetwebdesign/y2L3Q/

这可能不是完整的答案，但它可能是一个开始的地方。

参考
我之前研究过一个相关的问题，可能会感兴趣：
Make image fill div fully without stretching

于 2013-08-07T17:27:28.823 回答