Question

我一直试图让div与图像完全相同，但我不知道图像的纵横比，我希望图像适合网页的整个高度。

我在jsfiddle上使用display：inline-block

进行了一些实验

虽然在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>

`

Answer 1

取出所有这些东西：

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

DEMO

Answer 2

如果您希望在调整大小时调整div，我相信您需要JavaScript。您可以轻松使用jQuery的resize（）函数来完成您所说的内容。

我将以下代码添加到您的小提琴中：

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

这会将div的大小调整为窗口的高度（当你定义它时，它也将是图像的高度）。

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

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

2 个答案: