我正在为一个朋友做一个项目，作为我的第一个基于css/html的小"项目"；我对底部的图像有问题，如果你调整它的大小，它会不断地改变总的焦点，我该怎么做。
如果我把它做得更小，就会显示更多的照片，如果我把他做得更大，就会显示越来越少。(指调整浏览器大小(
https://codepen.io/Salt_Salt/pen/rNeNYyo
<style>
.text{
font-family: "Sofia";
}
#scrollingbar{
text-align :center;
border: 15px solid black;
font-size: 40px;
background: hotpink;
}
#text1{
position: relative;
display: inline;
bottom: 10vh;
}
#entreephoto{
text-align: center;
border: 15px solid black;
height: 50vh;
width: 50vh;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: hotpink;
overflow:hidden;
position: reletive;
}
#entreephoto > img{
position: absolute;
margin-top: -5vh;
margin-left: -28vh;
}
.bottomphoto{
margin-top: 10px;
border: 15px solid black;
padding:0px;
height:60vh;
width:100vw;
overflow:hidden;
text-align:center;
position: relative;
}
.photos> img{
position: absolute;
left: 0vh;
top: -100vh;
}
#text2{
position: relative;
font-size: 10px;
margin-top: -3.5vw;
font-size: 1.2vw;
white-space: nowrap;
}
img{
max-width:100%;
}
</style>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Sofia'>
</head>
<heading>
<div id="scrollingbar">
<img src = "https://cdn.discordapp.com/attachments/651540333125173262/741233047487250463/rra.png" width="10%" height= "auto">
<div id=text1 class="text">
Welcome to my page
</div>
<img src = "https://cdn.discordapp.com/attachments/651540333125173262/741233047487250463/rra.png" width="10%" height= "auto">
</div>
</heading>
<body>
<div id="entreephoto">
<img src="https://cdn.discordapp.com/attachments/651540333125173262/741232172987449374/2548.png" height="60%" width="auto%">
<div id=text2 class="text">
Some tongue just for you
</div>
</div>
<div class="bottomphoto">
<div class="photos">
<img src="https://cdn.discordapp.com/attachments/658376744637562880/740589629182443570/1080-3486.png" width="100%" height="auto">
</div>
</div>
</body>
</html>
如果希望图像始终完全显示在div中，则应添加width: 100%和height: 100%
它应该看起来像这样：
.bottomphoto {
margin-top: 10px;
border: 15px solid black;
padding: 0px;
height: 60vh;
width: 100%;
position: relative;
}
.bottomphoto>img {
position: absolute;
width: 100%;
height: 100%;
}<div class="bottomphoto">
<img src="https://cdn.discordapp.com/attachments/658376744637562880/740589629182443570/1080-3486.png">
</div>不过，在大宽度的情况下，图像会伸展得太多，看起来会很糟糕。另一种方法是调整div和图像的大小
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bottomphoto{
margin-top: 10px;
border: 15px solid black;
}
.bottomphoto > img {
width: 100%;
}<div class="bottomphoto">
<img src="https://cdn.discordapp.com/attachments/658376744637562880/740589629182443570/1080-3486.png">
</div>先下载照片，不要链接到它第二，给你的形象上课然后给styl