小编jim*_*iny的帖子

情况: 我正在开发一个涉及典型HTML/CSS组合的响应式设计.除了在div中有iframe的情况之外,一切都很好用.iframe应自动调整为父div的大小.一个纯粹的css解决方案没有出现,所以我采用JQuery方法.它可以很好地工作,除了在一个场景中,从较小的宽度调整到较大的宽度屏幕.

HTML:

<div class="container">
    <iframe class="iframe-class" src="http://www.cnn.com/"></iframe>
</div>

CSS:

.container {
    width: 100%;
    height: 250px;
}
.iframe-class {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

使用Javascript:

$(function () {
    setIFrameSize();
    $(window).resize(function () {
        setIFrameSize();
    });
});

function setIFrameSize() {
    var ogWidth = 700;
    var ogHeight = 600;
    var ogRatio = ogWidth / ogHeight;

    var windowWidth = $(window).width();
    if (windowWidth < 480) {
        var parentDivWidth = $(".iframe-class").parent().width();
        var newHeight = (parentDivWidth / ogRatio);
        $(".iframe-class").addClass("iframe-class-resize");
        $(".iframe-class-resize").css("width", parentDivWidth); …