Question

我有一个div内的图像定义的左右箭头。我所有的div高度和宽度都以百分比定义。当我放大或缩小网站时（使用Chrome），除了这些左右箭头（即图像所在的div）之外，所有元素的行为都与我期望的一样，但这些箭头看起来并不像其他一切。

我创建了一个JFiddle来展示我的意思。缩小时，我希望箭头图像变小，但这似乎不会发生。

以下是相关的HTML

<body>

<div class="container">

<div class="leftSideBar">

    <div class="miniLogo">
        <img src="icons/miniLogo.png" height="140" width="140" alt="Logo" />
    </div>

    <div id="mainMenu" class="navMenu">
        <nav>
            <ul>
                <li class="splashNav"><a id="a1" href="Welcome.php">WELCOME</a></li><br />
                <li class="splashNav"><a id="a2" href="Portfolio.php">PORTFOLIO</a></li><br />
                <li class="splashNav"><a id="a3" href="Contact.php">CONTACT</a></li> <br />
            </ul>
        </nav>
    </div>
    <div id="projectMenu" >
        <nav>
            <ul>
                <li class="projectNav"><a class="projectLink" href="?project=im licab">IM LICAB</a></li><li class="projectNav"><a class="projectLink" href="?project=project2">PROJECT2</a></li><li class="projectNav"><a class="projectLink" href="?project=project3">PROJECT3</a></li>                </ul>
        </nav>
    </div>
</div>

<div class="main">
    <div class="navArrow">
        <img src="icons/Click Left.png" alt="Left Arrow" class="hoverOver" onclick="nextPic('L')" />
    </div>
    <div class="coverPic">
    <img class="projectCoverPic" src="projects/im licab/IMALICKABLEGUY1.jpg" alt="Project Cover Picture" />     </div>
    <div class="navArrow">
        <img src="icons/Click Right.png" alt="Right Arrow" class="hoverOver" onclick="nextPic('R')" />
    </div>
</div>

<div class="rightSideBar">
    <div class="projectDesc"><p>Description</p>

<p>Paragraph1</p>

<p>Paragraph2</p>

<p>Paragraph3</p>
</div>  </div>
</div>

</body>
</html>

我的CSS

html, body {
margin:0; padding:0;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-color: white;
}

body {
font-family: Helvetica, sans-serif;
}


h1 {
text-align:center;
}

a:link{
text-decoration: none;
}

img {
max-width: 100%;
}

.hoverOver:hover {
cursor: pointer;
cursor: hand;
}

.container {
width:90%; 
height: 95%;
min-height: 95%;
max-height: 95%;
margin: auto;
padding: 0;
}

.leftSideBar {
width: 14%;
min-height: 100%;
max-height: 100%;
float: left;
margin: 0;
padding: 0;

}

.rightSideBar {
width: 20%;
min-height: 100%;
max-height: 100%;
float: left;
margin: 0;
padding: 0;
padding-top: 8%;
}

.navMenu {
width: 100%;
height: 30%;
}

.main {
margin-top: 10%;
margin-right: 4%;
margin-left: 4%;
padding: 0;
height: 70%;
min-height: 70%;
max-height: 70%;
width: 56%;
float: left;
}

.splashNav {
list-style-type: none;
}

#a1{
color: #9B9B9B;
}

#a2{
color: #AFAFAF;
}

#a3{
color: #BFBFBF;
}

#a1:hover{
text-decoration: none;
color: #737373;
}

#a1:active{
text-decoration: none;
color: #737373;
}

#a2:hover{
text-decoration: none;
color: #737373;
}

#a2:active{
text-decoration: none;
color: #737373;
}

#a3:hover{
text-decoration: none;
color: #737373;
}

#a3:active{
text-decoration: none;
color: #737373;
}

#logo {
display: block;
margin: auto;
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */
}

#welcomeMenu{
margin-top: 100%;
}

#contactPhoto{
display: block;
margin: auto;
}

#mainMenu {
margin-top: 10%;
}

.miniLogo {
margin-top: 40%;
margin-left: 5%;
}

.projectNav {
list-style-type: none;
}

.projectLink {
color: black;
font-size: 70%;
margin-left: 15%;
}

.projectDesc {
float: right;
font-size: 85%;
margin-top: 55%;
}

.coverPic {
margin: auto;
margin-top: -6.5%;
float: left;
max-width: 88%;
padding-left: 3%;
padding-right: 3%;
}

.projectCoverPic {
max-width: 100%;
}

.navArrow {
float: left;
margin: auto;
margin-top: -5.5%;
max-width: 2.5%;
height: 100%;
}

Answer 1

那是因为你已经明确地将它的高度设置为100%所以它的宽度为auto并且它总是有足够的宽度来保持宽高比，但是因为你也设置了{{ 1}}它也不能超越那个，这是你正在看的尺寸......

Div / Picture在缩放时无法正确调整大小

1 个答案: