时间戳

首页 > 解决方案 > 图像无法正确调整大小，它会不断改变一般焦点/中心点

css - 图像无法正确调整大小，它会不断改变一般焦点/中心点

问题描述

我正在为朋友开发一个项目，作为我的第一个基于 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>

标签： cssimage

解决方案

如果您希望图像始终完全显示在您的 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>

推荐阅读