我不知道为什么，但我的图像改变大小时，我放大或缩小我的窗口（ chrome ）。有人知道为什么吗？这是我的代码：图片的CSS是“MyPhotoIntro”。它在CSS和HTML的最末端。This normal sizeThis is zoomed out如果有人知道该怎么做，将非常感激
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="gethomeworkdone.css">
</head>
<body>
<div class="navabr1">
<nav>
<div class="head__logo">
<div class="logo">
<a class="linklogo" href="http://www.google.com">VovaSite</a>
</div>
</div>
<div class="barsection">
<div class="nav-wrapper">
<ul class="nav">
<li class="nav-home">
<a href="Homepage.html">Home</a>
</li>
<li class="nav-about">
<a href="aboutme.html">About</a>
</li>
<li class="nav-articles">
<a href="homeworkdone.html">Homeworkdone</a>
</li>
<li class="nav-articles">
<a href="articles.html">articles</a>
</li>
<li class="nav-articles">
<a href="articles.html">articles</a>
</li>
<li class="nav-articles">
<a href="articles.html">articles</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="backroundcolourthing-gethomeworkdone">
<div class="sectionintro">
<div class="sectionleft">
<h1 class="introphrase1"> Need a break from Homework? </h1>
<p class="introphrase2"> Got tired of all-nighters? Let others do it for you ! </p>
</div>
<div>
<a style="text-decoration:none" href="homeworkexchange.html" class="butten">Yourhomeworkdone</a>
</div>
<div class="sectionphotoright">
<img class="myphotointro" alt="Pacific" src="imgintro.jpg" >
</div>
</div>
</body>
</html>和CSS：
nav {
display: flex; /* 1 */
justify-content: space-between; /* 2 */
padding: 1rem 2rem; /* 3 */
background: rgb(247, 251, 255);;/* 4 */
}
nav ul {
display: flex; /* 5 */
list-style: none; /* 6 */
margin: auto;
}
nav li {
padding-left: 3rem; /* 7! */
margin: 3%;
margin-left: 20px;
}
nav a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
font-family: sans-serif light ;
}
.barsection {
margin-right: right;
}
.linklogo {
color: rgb(0, 0, 0);
font-size: 25px;
display: flex; /* 1 */
justify-content: space-between; /* 2 */
padding: 1rem 2rem; /* 3 */
}
#backroundcolourthing-gethomeworkdone {
background-color:rgb(247, 251, 255);;
padding: 10px ;
border: 0px solid green ;
width: auto;
height: 320px;
margin: 0;
}
.sectionleft {
position: relative;
left: -280px;
top: 50px;
}
.introphrase1 {
font-family: optima;
font-size: 40px;
color: rgba(0, 0, 0, 0.895);
text-align: center;
}
.introphrase2 {
font-family: optima;
font-size: 23px;
color: rgba(0, 0, 0, 0.895);
text-align: center;
}
.myphotointro {
display: flex;
flex-direction: column;
margin: -8em auto;
margin-left: 60em;
max-width: 1140px;
width: 20%;
}
.butten {
position: absolute;
top: 34%;
left: 30%;
background-color:#618fecac;
color: rgba(0, 0, 0, 0.726);
border:none;
border-radius:20px;
padding:15px;
position: absolute;
}我试了很多次，但我不知道
2条答案
按热度按时间6jjcrrmo1#
这是因为你设置宽度的百分比。如果你不想改变它与放大/缩小，你需要使用像素单位。而且最大宽度是相对的，如果你改变结果，它会改变图像的宽度。
tgabmvqs2#
问题是无论缩放级别如何，图像的绝对大小都保持不变，这是因为您指定了宽度百分比。请将其更改为
px或em值，使其在默认缩放级别下看起来大致相同。虽然缩小时布局仍然会被破坏，这是因为你的图片左边距是
em大小。为了快速修复，我建议在这里使用一个百分比值，也许像margin-left: 60%;。