1

Google+の「ライトボックス」画像でブラウザのサイズを変更したときに画像がどのように拡大縮小されるかに気付いたので、これに興味を持ちました：https ://plus.google.com/ 。

以下は、ブラウザの幅のサイズを変更すると、画像の幅のサイズを変更するだけでアスペクト比が失われるjsfiddleです。http： //jsfiddle.net/trpeters1/mFPTq/1/

この画像のアスペクト比を維持するためにCSSがどのように見えるかを誰かが理解するのを手伝ってもらえますか？

jsfiddleを表示したくない場合は、次のHTMLを使用してください。

<div id="imgWrapper" >
  <div id="titleContainer">title container
  </div>
  <div id="imgContainer"  >    
        <img id="mainImg" src="https://lh4.googleusercontent.com/-f8HrfLSF2v4/T609OOWkQvI/AAAAAAAAGjA/waTIdP4VkMI/s371/impact_of_early_exposure_to_D%26D.jpg">    
  </div>
</div>​

これがCSSです：

 #imgWrapper{
  background:gray;
  width:80%;
  height:80%;
  border-radius:5px;
  border:1px solid gray;
 }
 #imgContainer{
   width:100%;
   height:100%;    
 }
#titleContainer{
  background:yellow;
  border-radius:5px;
  border:1px solid gray;
}
#mainImg{
  width:100%;
  height:61.8%;    
}​
4

2 に答える 2

5

私があなたを正しく理解しているなら、単にimgすべての高さを一緒に取り除いてください。

http://jsfiddle.net/mFPTq/2/

#mainImg{
    width:100%;
    /* NO HEIGHT height:61.8%; */
}​
于 2012-05-11T21:48:08.083 に答える
0

時々ブラウザは高さをスケーリングします...私はこの問題を抱えていたので、私が修正したのはこれだけでした：

 <style> 
 img{ max-width:100%; height:auto; }
 </style>
于 2014-05-26T21:51:18.210 に答える