图像无法正确调整大小，它会不断更改一般焦点/中心点
图像无法正确调整大小，它会不断更改一般焦点/中心点
提问于 2020-08-07 19:13:00
我正在为一个朋友做一个项目，作为我的第一个基于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>Stack Overflow用户
发布于 2020-08-07 19:55:21
如果您希望图像始终完全显示在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63300638
复制相关文章
相似问题
腾讯云开发者
