Question

当我调整浏览器窗口的大小时，我正在使用以下功能调整图像大小：

function resize_image(a){
    $(a).on("load",function(){
        var b;
        var d=$(this).width()/$(this).height();
        var c=$(this).parent().width() / $(this).parent().height();
        if(d<c){
            b={width:"auto",height:"100%"}
        }else{
            b={width:"100%",height:"auto"}
        }
        $(this).css(b)
    })
};

只有在元素上没有任何固定的高度或宽度时，该功能才有效。我希望将图像放在DIV标签中，这样我就可以得到一个背景颜色/图像来指示图像正在加载，而不是一个不可见的图像（就像现在一样）。

为什么我想要一个与图像高度相同的手动高度，因为我在图像下面有一些内容。当网站加载图片时，内容位于网站的顶部（顶部= 0）。加载图像后，内容会弹出，使其位于图像下方。我想要防止这种情况，因为有时因为网页托管而导致图像加载有点慢，当内容可见而图像不可见时，它看起来有点奇怪。

现在回答我的问题。是否可以使用此功能在DIV标签中设置手动高度，并根据浏览器的窗口大小正确调整图像大小？

Answer 1

在加载图像之前，为图像预留空间有点麻烦......

这种方法围绕着了解图像的纵横比，因此首先要考虑以下几点：

图像是否硬编码到页面中？如果是这样，您可以自己硬编码宽高比。这是最简单的方法。

如果图像是动态的，并且不知道宽高比，则必须使用其他内容来确定宽高比。我的建议是使用PHP的getimagesize() http://php.net/manual/en/function.getimagesize.php。

对于这个例子，我假设您能够对比率进行硬编码。

这里的技术相当详细：

http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/

我建议给予读取并忽略我的帖子的其余部分，因为它可能会更有用。但是，这是摘要：

因为图像在加载之前不会占用任何空间，所以不能依赖它来创建空间。但是，您可以使用填充来提前预留空间。为此，需要将容器元素的高度设置为0，以便填充完全控制元素的高度。

接下来，您要将填充设置为反映宽高比的百分比。

例如，16：9图像的宽度为100％，100％的9/16为56.25％。因此，您将对元素应用padding-bottom：56.25％。它现在将保留相对于容器宽度的16：9块，忽略子元素的高度。（也就是说，不要将孩子的身高添加到元素的总高度，因为它已被考虑在内。）

所以，要把它们放在一起，你会有这样的事情：

<div class="container">
    <div class="image-space">
        <img src="something.jpg" alt="16:9 Image" />
    </div>
    <p>This space is reserved!</p>
</div>

和css：

.container {
    width: 50%;
    height: 300px;
}
.image-space {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
img {
    width: 100%;
}

完整示例：

http://jsfiddle.net/MeyEb/

*请注意我抓取的随机图像的比例不是很合适，因此您可以看到它下方的额外空间。如果你做对了就不会发生这种情况，虽然在加号上，它有助于展示你可以在后面放置一个背景的事实，它会在那里，即使图像不是可见的。 / p>

根据浏览器的窗口大小调整固定高度的图像大小

1 个答案: