Изображение не изменится должным образом, оно постоянно меняет общий фокус / центральную точку - PullRequest
Новая
       251

Изображение не изменится должным образом, оно постоянно меняет общий фокус / центральную точку

0 голосов
/ 07 августа 2020

Я работаю над проектом для друга в качестве моего первого маленького "проекта" на основе css / html, и у меня проблема с изображением внизу, если вы измените его размер, оно постоянно меняет общий фокус, как мне go об этом не делать этого.

Если я сделаю его меньше, будет отображаться больше фото, если я сделаю его больше, будет отображаться все меньше и меньше. (Имеется в виду изменение размера браузера)

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>

Ответы [ 2 ]

0 голосов
/ 07 августа 2020

Если вы хотите, чтобы изображение всегда полностью отображалось в вашем 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>
0 голосов
/ 07 августа 2020

Сначала загрузите фото, не ссылайтесь на него, затем дайте класс своему изображению, а затем дайте стилю

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...