OperaのImgの幅がうまく動作しない

Question

私はHTML & CSS3の完全な初心者です。 新しいウェブページを構築しようとしているうちに、私は学びます。私のイメージギャラリーはOperaを除くすべてのブラウザで動作し、ポートレート画像の幅はOperaでのみ歪みがありますが、風景画像ではうまく動作します。

HTML

<!-- Gallery Image 1 --> 
      <div class="thumbox"> 
        <a href="#openphoto1"> 
         <img src="http://www.ghyllfarm.co.uk/_fiddle/image_1_thumb.jpg" width="110" height="110" alt=" "> 
        </a> 
       <div id="openphoto1" class="modalDialog"> 
        <div id="landscapephoto"> 
         <a href="#close" title="Close" class="close">X 
         </a> 
          <img src="http://www.ghyllfarm.co.uk/_fiddle/image_1.jpg" width="780" height="520" alt=" "> 
         <div class="photolabel">Landscape Image 
         </div> 
        </div> 
       </div> 
      </div> 
       <div class="thumblabel">Click to open 
       </div> 


    <!-- Gallery Image 2 --> 

      <div class="thumbox"> 
        <a href="#openphoto2"> 
         <img src="http://www.ghyllfarm.co.uk/_fiddle/image_2_thumb.jpg" width="110" height="110" alt=" "> 
        </a> 
       <div id="openphoto2" class="modalDialog"> 
        <div id="portraitphoto"> 
         <a href="#close" title="Close" class="close">X 
         </a> 
          <img src="http://www.ghyllfarm.co.uk/_fiddle/image_2.jpg" height="780" width="520" alt=" ">  
         <div class="photolabel">Portrait Image 
         </div> 
        </div> 
       </div> 
      </div> 
       <div class="thumblabel">Click to open 
       </div> 

CSS

img { 
width: 100%; 
height: 100%; 
width: auto\9; /* ie8 */ 
} 

.thumbox { 
width: 110px; 
height: 110px; 
Margin: 0px auto 0px auto; 
} 

.thumblabel { 
width: 110px; 
height: 20px; 
Margin: 10px auto 10px auto; 
font-family:Tahoma, Geneva, sans-serif; 
font-size: 12px; 
text-align: center; 
color:#060; 
} 

.modalDialog { 
position: fixed; 
font-family: Arial, Helvetica, sans-serif; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
background: rgba(0,0,0,0.6); 
z-index: 99999; 
opacity:0; 
-webkit-transition: opacity 400ms ease-in; 
-moz-transition: opacity 400ms ease-in; 
transition: opacity 400ms ease-in; 
pointer-events: none; 
} 

.modalDialog:target { 
opacity:1; 
pointer-events: auto; 
} 

.modalDialog > div { 
position: fixed; 
top: 50%; 
left: 50%; 
-ms-transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 
padding: 15px 15px 5px 15px; 
border-radius: 10px; 
background: #fff; 
} 

#landscapephoto { 
width: 50%; 
height: auto; 
} 

#portraitphoto { 
width: auto; 
height: 70%; 
padding-bottom: 40px; 
} 

.close { 
background: #606061; 
color: #FFFFFF; 
line-height: 25px; 
position: absolute; 
right: -12px; 
text-align: center; 
top: -10px; 
width: 24px; 
text-decoration: none; 
font-weight: bold; 
-webkit-border-radius: 12px; 
-moz-border-radius: 12px; 
border-radius: 12px; 
-moz-box-shadow: 1px 1px 3px #000; 
-webkit-box-shadow: 1px 1px 3px #000; 
box-shadow: 1px 1px 3px #000; 
} 

.close:hover { background: #00d9ff; } 

.photolabel { 
width: 300px; 
height: 20px; 
Margin: 10px auto 10px auto; 
font-family:Tahoma, Geneva, sans-serif; 
font-size: 14px; 
text-align: center; 
color:#060; 
} 

Answer 1

私が正しくあなたを理解していれば、あなたは基本的にウィンドウのサイズが変更があったとき、あなたの肖像画や風景の画像の縦横比を維持しようとしています。私がしました

https://jsfiddle.net/7cb24j8d/

：

#landscapephoto { 
    width: 50vw; /* 50% of viewport width */ 
    height: 37.5vw; /* = 50 * (3/4), i.e. three-quarters of viewport width */ 
} 

#portraitphoto { 
    width: 46.67vh; /* = 70 * (2/3), i.e. two-thirds of viewport height */ 
    height: 70vh; /* 70% of viewport height */ 
    padding-bottom: 40px; 
} 

ここでフォークフィドルだ：あなたが何をする必要があるか、あなたのケースのために非常にsimilar questionからthis answerを適応させることは、このような何か、ビューポート単位を使用しています横幅（50％）と肖像高（70％）の最初の割合を維持し、他のの幅と高さを相対的な値に設定しますが、これらの数値は好みに合わせて調整することができます。サイズが変更されたときに画像に対して相対的に中心から外れているため、div.photolabelも調整する必要があります（ただしこれは別の質問です）。 caniuseもチェックして、ターゲットブラウザがすべてビューポート単位をサポートしていることを確認する必要があります。