3

divを画像とまったく同じサイズにしようとしていますが、画像のアスペクト比がわからないため、画像をWebページの高さ全体に合わせたいと思います。

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>

``

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 に答える