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

如果我对您的理解正确，您基本上是在调整窗口大小时尝试保持纵向和横向图像的纵横比。将this answer 调整为非常适合您的similar question，您需要做的是使用视口单位，如下所示：

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

这是分叉的小提琴：

https://jsfiddle.net/7cb24j8d/

我保留了横向宽度 (50%) 和纵向高度 (70%) 的初始百分比，并将 other 宽度和高度设置为相对于这些，但显然你会能够根据自己的喜好调整这些数字。您还必须调整div.photolabel，因为当您调整大小时它当前相对于图像偏离中心（但这是一个不同的问题......）。您还应该检查caniuse 以确保您的目标浏览器都支持视口单元。