Изображение не имеет отзывчивого поля снизу - PullRequest
Новая
       12

Изображение не имеет отзывчивого поля снизу

0 голосов
/ 29 ноября 2018

Этот сайт, который я кодирую, имеет заголовок с портфолио.Я хочу, чтобы люди "Аватар" были на полпути в портфолио.По сути, я хочу, чтобы изображение аватара всегда было на 50% меньше, чем у портфолио.Страница отзывчива, поэтому она соответственно сжимается.Однако изображение аватара соответственно сжимается / изменяется;нижнее поле не сохраняет ту же пропорцию.Я всегда хочу, чтобы это было на 50% ниже, на следующий div.Вот GIF.Начало - это то, как я хочу, смотреть, когда я изменяю размер.Спасибо.

https://imgur.com/a/nL6m9ow

вот мой код 

body {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

.avatar img {
  width: 100%;
  margin-bottom: -100px;
}
<div class="avatar">
  <img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
  <img src="images/banner.png" class="banner">
</div>

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Если вы используете относительные единицы измерения (%) для ширины вашего аватара, а также для отступа, он будет соответственно увеличиваться / уменьшаться. 

body {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

.avatar {
  position: relative;
  padding-top: 7.5%;
}

.avatar img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  border-radius: 50%;
  border: 6px solid white;
}

.portfolio img {
  max-width: 100%;
}
<div class="avatar">
  <img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
  <img src="https://picsum.photos/1200/400" class="banner">
</div>
0 голосов
/ 29 ноября 2018 

body{
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}
.avatar {
  position: relative; 
  padding-top: 100px;
}
.avatar img{
    max-width: 100px;
  position:absolute;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
    
}

.portfolio img {
  max-width: 100%;
}
<div class="avatar">
            <img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
        </div>
        <div class="portfolio">
            <img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
        </div>

проверьте этот код, или вы также можете проверить это здесь.найти ссылку для codepen.https://codepen.io/atulraj89/pen/qQQBMm

Измените размер окна и наслаждайтесь

...