Img width on Opera not working - html

Question

I am a complete newbie to HTML & CSS3.
I am learning as I go along and try to build a new webpage. My image gallery works in all browsers except Opera and the width of a portrait image is distorted only in Opera, but works fine with a landscape image.
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

If I understand you correctly, you're basically trying to maintain the aspect ratio of your portrait and landscape images when the window gets resized. Adapting this answer to a very similar question for your case, what you need to do is use viewport units, something like this:
#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;
}
Here's the forked fiddle:
https://jsfiddle.net/7cb24j8d/
I've kept your initial percentages of landscape width (50%) and portrait height (70%) and set the other width and height to be relative to those, but obviously you'll be able to adjust these numbers to your liking. You'll also have to adjust the div.photolabel, as it's currently moving off-centre relative to the image when you resize (but that's a different question...). You should also check caniuse to make sure your target browsers all support viewport units.