适应图片到父级div的尺寸

Question

我已经创建了一个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>

输出结果如下： 您可以看到右侧有一个滚动条。我不希望它在那里。

- syd

---

这看起来像是一个重复的问题：https://dev59.com/Qm445IYBdhLWcg3w0dZD - hendr1x

@hendr1x，该链接没有任何被接受的答案。 - syd

你有检查过 "background-size:cover;" 吗？可以在 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover 上查看示例。 - Atif

这里存在一个根本性的问题。您的图像具有可能与您的视口（浏览器窗口）纵横比不同的纵横比。在某些情况下，如果视口比您的图像更高，则需要使用max-width，如果视口比您的图像更宽，则需要使用max-height。您需要一些JavaScript / jQuery来帮助您在调整窗口大小时设置正确的样式。 - Marc Audet

@MarcAudet：谢谢！你的回答很有帮助。你开拓了一种新的视角。 :) - syd

Answer 1

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

演示fiddle: http://jsfiddle.net/audetwebdesign/y2L3Q/

这可能不是完整的答案，但可以作为一个起点。

参考资料
我之前曾处理过一个相关问题，可能会很有用：
使图片完全填充div而不拉伸

- Marc Audet