我有一个由 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%;
}
最佳答案
那是因为你明确地将它的高度设置为 100% 所以它的宽度是 auto 并且它总是有足够的宽度来保持纵横比，但是因为您还设置了 max-width:2.5% 它也不能超过这个值，这就是您正在查看的大小...
关于html - Div/图片在缩放时无法正确调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23028937/