Img largeur sur Opera ne fonctionne pas

Question

Je suis un débutant complet au HTML & CSS3. J'apprends au fur et à mesure et j'essaie de créer une nouvelle page Web. Ma galerie d'images fonctionne dans tous les navigateurs sauf Opera et la largeur d'une image portrait n'est déformée que dans Opera, mais fonctionne bien avec une image de paysage.

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

Si je vous comprends bien, vous êtes essentiellement en essayant de maintenir le ratio d'aspect de vos images portrait et paysage lorsque la fenêtre se redimensionnée. Adaptation this answer à un très similar question pour votre cas, ce que vous devez faire est d'utiliser unités de fenêtres, quelque chose comme ceci:

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

est ici le violon fourchue:

https://jsfiddle.net/7cb24j8d/

J'ai Gardez vos pourcentages initiaux de largeur de paysage (50%) et de hauteur de portrait (70%) et réglez la autre largeur et hauteur par rapport à celles-ci, mais évidemment, vous serez en mesure d'ajuster ces chiffres à votre goût . Vous devrez également ajuster le div.photolabel, car il est en train de se décentrer par rapport à l'image lorsque vous redimensionnez (mais c'est une question différente ...). Vous devez également vérifier caniuse pour vous assurer que vos navigateurs cibles prennent tous en charge les unités de fenêtre.