Img Breite auf Opera funktioniert nicht

Question

Ich bin ein kompletter Neuling zu HTML & CSS3. Ich lerne, während ich gehe und versuche, eine neue Webseite zu bauen. Meine Bildergalerie funktioniert in allen Browsern außer Opera und die Breite eines Porträtbildes ist nur in Opera verzerrt, funktioniert aber gut mit einem Landschaftsbild.

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

Wenn ich Dich richtig verstehe, versucht man im Grunde das Seitenverhältnis der Portrait- und Landschaftsaufnahmen zu halten, wenn die Fenstergröße verändert wird. Die Anpassung this answer zu einem sehr similar question für Ihren Fall, was Sie tun müssen, ist, zu verwenden Darstellungseinheiten, etwa wie folgt:

#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; 
} 

Hier ist die gegabelten Geige:

https://jsfiddle.net/7cb24j8d/

Ich habe behalten Sie Ihre anfänglichen Prozentsätze der Querformatbreite (50%) und der Portraithöhe (70%) und setzen Sie die Breite und die Höhe relativ zu denen, aber offensichtlich werden Sie in der Lage sein, diese Zahlen Ihren Neigungen anzupassen . Sie müssen auch die div.photolabel anpassen, da es sich derzeit relativ zum Bild bei der Größenänderung nicht in der Mitte bewegt (aber das ist eine andere Frage ...). Sie sollten auch caniuse überprüfen, um sicherzustellen, dass Ihre Zielbrowser alle Ansichtsfenstereinheiten unterstützen.