Средства пропорционального масштабирования

Question

Смотрел видеоурок Отзывчивые изображения. В нем с 0:00-10:02 показано как делать отзывчивые картинки. Есть фоновая картинка для сайта и дополнительные. Главная картинка

Дополнительные - логотип

и гамбургер

Есть сайт

/* Обнуление */

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

html,
body {
  height: 100%;
  line-height: 1;
  background: #fafafa;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  font-family: Poppins;
}

.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._container {
  max-width: 1046px;
  padding: 0px 15px;
  margin: 0px auto;
  box-sizing: content-box;
}

._ibg {
  /*
    position: relative;
    padding-bottom: calc(653.95/1309*100%);
    */
}

._ibg img {
  position: absolute;
  max-width: 100%;
  height: 100%;
  top: 0;
  /*left: 0;*/
  right: 0;
  /*left: 0;*/
  object-fit: cover;
  object-position: center;
  /*background-size: cover;*/
  /*z-index: -1;*/
}


/* =========================================================================== */

.page {}

.page__main-block {}

.main-block {
  /*position: relative;*/
  /*
    height: 100vh;
    min-height: 811px;
    */
  max-width: 100%;
  /*text-align: center;*/
}

.main-block__container {
  /*
    background-image: url("../img/mainblock/mainimage.png");
    background-size: cover;
    background-position: bottom center;
    height: 811px;
    */
  /*width: 1441px;*/
  position: relative;
  /*max-width: 100%;*/
  z-index: 2;
}

.main-block__logo {}

.main-block__body {
  /*margin-top: 22px;*/
  /*width: 50%;*/
  /*display: flex;
    flex-direction: column;*/
}


/*
@media (max-width: 100vw) {
    
    .main-block__body {
        display: flex;
        flex: 0 1 50%;
        flex-direction: column;
    }
        
}
*/

.main-block__smalltitle {
  /*position: relative;*/
  height: 21px;
  margin-left: 166px;
  /*right: 83.77%;*/
  /*top: calc(50% - 21px/2 - 195.5px);*/
  margin-top: 130.96px;
  width: 100px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  /* identical to box height */
  /*color: #FFFFFF;*/
  /*z-index: 10;*/
}

.main-block__title {
  /*position: absolute;*/
  margin-left: calc(166/1441*100vw);
  width: calc(616/1441*100vw);
  margin-top: 22px;
  /*bottom: 35.68%;*/
  height: 222px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 60px;
  line-height: 74px;
  /* or 123% */
  /*color: #FFFFFF;*/
  /*z-index: 10;*/
}

.main-block__text {
  margin-top: 24px;
  margin-left: calc(166/1441*100vw);
  width: calc(581/1441*100vw);
  height: 55px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  /*z-index: 10;*/
}

.main-block__items {
  margin-top: 45px;
  margin-left: calc(166/1441*100vw);
  padding-bottom: 170px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.main-block__link {
  height: 24px;
}

.main-block__link_yellow {
  color: yellow;
}

.main-block__image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}


/* ============================================================================ */

.main-block__logo_white_triangle {
  width: 42px;
  height: 35px;
  left: 164px;
  top: 27.27px;
  background: #FFFFFF;
  /*transform: matrix(1, 0, 0, -1, 0, 0);*/
}

.main-block__logo_yellow_triangle {
  width: 29.21px;
  height: 24.35px;
  left: 176.78px;
  top: 27.27px;
  background: #F6F6F6
}

.main-block__logo_name {
  width: 179.23px;
  height: 33.05px;
  /*margin-left: calc(230.2/1441*100%);*/
  /*214.8px;*/
  /*margin-top: 24px;*/
  background: #FFFFFF;
  /*z-index: 15;*/
}

.main-block__logo_hamburger_icon {
  /*
    margin-top: 23px;
    margin-right: calc(166/1441*100%);
    */
  width: 40px;
  height: 40px;
  background: #ffffff;
  /*z-index: 15;*/
}

.main-block__header {
  /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-block__nav {
  padding-top: 42px;
  /*
    margin-left: calc(50% - 1155/(2*1441)*100%);
    margin-right: calc(50% - 1155/(2*1441)*100%);
    */
  /*
    margin-left: auto;
    margin-right: auto;
    */
  max-width: /*calc(1110/1441*100%) 77%*/
  1110px;
  /*1111px*/
  /*flex: 1 1 calc(1155/1441*100%);*/
  margin: auto;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Webovio</title>
</head>

<body>
  <div class="wrapper">
    <main class="page">
      <div class="page__main-block main-block">
        <div class="main-block__container">
          <div class="margin-block__header">
            <div class="main-block__nav">
              <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
              <!--<div class="main-block__header_image_1">-->
              <img src="https://i.stack.imgur.com/UebFG.png" class="main-block__logo_name" alt="logoname">
              <!--</div>-->
              <!--<div class="main-block__header_image_2"></div>-->
              <img src="https://i.stack.imgur.com/4VkiD.png" class="main-block__logo_hamburger_icon" alt="menulogo">
              <!--</div>-->
            </div>
          </div>
          <div class="main-block__body">
            <div class="main-block__smalltitle">A place where</div>
            <div class="main-block__title">A creative agency for redemptive brands</div>
            <!--
                        <div class="main-block__text">
                            Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                        </div>
                        -->
            <div class="main-block__items">
              <!--<a href="" class="main-block__link main-block__link_yellow">Get in touch link</a>-->
            </div>
          </div>
        </div>


        <div class="main-block__image _ibg">
          <img src="https://i.stack.imgur.com/PxBpn.png" alt="cover">
        </div>


      </div>
    </main>
  </div>
</body>

</html>

Как сделать так, чтобы главное изображение пропорционально изменялось (отзывчиво)? Пытался использовать max-width - не получилось. Как использовать padding-bottom для задания пропорциональной высоты изображения (к какому объекту применять это свойство) вообще не понял (применительно к данной задаче). Должно быть как на

Перечислите все средства пропорционального масштабирования (в контексте данной задачи).

Answer 1

У вас есть размер картинки, допустим 1366x768. Чтобы она пропорционально сжималась вместе с экраном, вам нужно получить соотношение (ratio), именно соотношение высоты от ширины (т.к. в большинстве случаев у изменения экрана по ширине (высота "прячется" под скроллом)).

Как получить соотношение, делим высоту на ширину 768 / 1366 * 100, округляем и получаем 56.22% - это размер padding-top.

Я обычно использую такую конструкцию, чтобы и блоки внутри расположить спокойно.

body {margin: 0;}

.block {
  display: block;
  width: 100%;
  max-width: 600px; /* ограничение размера блока */
  position: relative;
  /* resize */
  overflow: hidden;
  resize: horizontal;
  /* resize */
}

.block::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(810 / 1440 * 100%);
}

.block img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<div class="block">
  <!-- img size 1440x810 -->
  <img src="//i.stack.imgur.com/PxBpn.png">
</div>

Добавил "уголок" ресайза, для того, чтобы продемонстрировать, что блок будет пропорционально менять свой размер.

При помощи min-width или max-width вы можете ограничить минимальную и максимальную ширину блока, т.к. процент будет растягивать его по ширине родителя.

Да в общем понятно. Ваш resize вместе с padding-top конечно очень помог, но для широты представлений прокомментируйте другие методы. А вы смотрели тот видос с 2:00-2:40? Обязательно посмотрите этот промежуток и прокомментируйте здесь. Прокомментируйте пожалуйста этот промежуток, чтоб внести ясность и дать полное представление по всем методам.

Тут ещё проще, смотрите код

.resize {
  min-width: 320px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  resize: horizontal;
}

.width-100 {
  display: block;
  width: 100%;
}

.width-500px {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

<div class="resize">
  <img class="width-100" src="//via.placeholder.com/400x100?text=400x100">
  <br>
  <img class="width-500px" src="//via.placeholder.com/400x100?text=400x100 | max-width: 500px">
</div>

БЛОГ НА HUSL

Средства пропорционального масштабирования

Ответы (1 шт):