根据浏览器窗口大小

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标签中显示图像，这样我就可以得到一个表明图像正在加载的背景颜色/图像，而不是一个不可见的图像（就像现在这样）。

为什么我想要一个与图像高度相同的手动高度，是因为我在图像下有一些内容。当网站加载图片时，内容位于网站顶部（top = 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％。因此，您将对元素应用填充底部：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/

*请注意，我抓住的随机图像不是正确的比例，所以你可以看到在它下面有额外的空间。如果你做得对，就不会发生这种情况，尽管在正面大小上，它有助于展示一个事实，即你可以在背后放置一个背景，并且它会在那里，即使图像不是这样。