3

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

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

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>

​ `

4

2 回答 2

1

取出所有这些东西：

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

演示

于 2012-07-19T21:04:37.650 回答
1

如果您希望 div 在调整大小时进行调整，我相信您将需要 JavaScript。你可以很容易地使用 jQuery 的 resize() 函数来做你正在谈论的事情。

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

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

这会将 div 的大小调整为窗口的高度（这也将是您定义的图像的高度）。

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

于 2012-07-19T21:09:40.963 回答