CSS：如何使一个div与高度限制的图像大小相同

Question

CSS：如何使一个div与高度限制的图像大小相同

csshtml

3

我一直试图使div与图片大小完全相同，但我不知道图片的宽高比，并希望图片适应整个网页的高度。

我尝试使用display:inline-block在jsfiddle上进行了一些实验：

http://jsfiddle.net/jxKqp/4/

当网页在Chrome中加载时，它似乎看起来还不错，但是如果重新调整网页大小，它就无法正确地匹配。在Firefox中根本不起作用。也许有更好的方法来限制div的大小以匹配图片？

下面是类似的内联代码：

<!HTML>
<html>
 <head>
 <style type="text/css">
 .background_image {
   height:100%;
   width:auto;
   border: 5px solid #ff0000;
 }
 body {
  overflow:hidden;
 }
 div.container {
   position:relative;
   display:inline-block;
      border: 5px solid #00ff00;
  }
  div.inner {
     position:absolute;
     top:0;bottom:0;left:0;right:0;
     border: 5px solid #0000ff;
     border-style:groove;
     z-index:2;
     background:black;
     color:white;
     opacity:.5
}
</style>
</head>
<body>
<div class="container"> 
  <img    src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Henry_ford_1919.jpg/470px-Henry_ford_1919.jpg" class="background_image"/>
  <div class="inner">
    I want to be same size as the image
  </div>
</div>

`

- Daniel Horn

2个回答

1

如果您希望在调整大小时使div自适应，我认为您需要使用JavaScript。您可以轻松地使用jQuery的resize（）函数来实现您所说的内容。

我已将以下代码添加到您的fiddle中：

$(document).ready(function(){
    $(window).resize(function(){
        $('.inner').height($(window).height());
    });        
});

这将调整 div 的大小以适应窗口的高度（因为您正在定义它的高度，所以也将是图像的高度）。

在此处查看新的 fiddle：http://jsfiddle.net/jxKqp/7/

- Ben Dyer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sachleen · Accepted Answer

把所有这些东西都拿出来：

 .background_image {
   height:100%;
   width:auto;
   border: 5px solid #ff0000;
 }
 body {
  overflow:hidden;
 }

演示