0

Есть сверстанная страница, которая масштабируется по вертикали (при изменении высоты экрана все элементы пропорционально уменьшаются).

введите сюда описание изображения

Все единицы измерения в CSS заданы в REM:

html {
    font-size: 1vh;
}

.wrapper {
    padding: 6.5rem 0;
}

.logo_block {
    padding: 0 0 1rem;
}

.logo_block .logo {
    width: 19.4rem;
}

.content_block {
    padding: 0 1.9rem;
}

.image_desktop {
    width: auto;
    height: 74rem;
}

.text_block {
    margin: -15.5rem auto 4.2rem;
    max-width: 64rem;
}

.text_block .subtitle {
    margin: 0 0 1.4rem;
    font-size: 2.4rem;
}

.text_block .main_title {
    font-size: 7.4rem;
}

.text_block .description {
    font-size: 2.77rem;
}

.text_block .promocode {
    margin: 0 0.5rem;
    padding: 0.4rem 1.4rem;
    border: 0.2rem solid #fff;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
}

.button {
    width: 24rem;
    height: 8rem;
    -webkit-border-radius: 4rem;
    -moz-border-radius: 4rem;
    border-radius: 4rem;
    font-size: 2.4rem;
    line-height: 8rem;
}

HTML:

<div class="wrapper">
        
        <div class="logo_block">
            <img class="logo" src="./img/logo.png" alt="logo">
        </div>

        <div class="content_wrapper">

            <div class="content_block">

                <img class="image image_desktop" src="./img/img_desktop.png" alt="image">

                <div class="text_block">
                    <h4 class="subtitle">Mostbet rəsmi səfiri</h4>
                    <h1 class="main_title">Nəriman Abbasov</h1>
                </div>

                <a class="button" href="#">Qoşulmaq</a>

            </div>

        </div>

    </div>

Но при уменьшении ширины экрана контент заходит за края. Как сделать масштабирование контента по ширине? Чтобы если контент по ширине не влазит, то он также бы масштабировался, как и по высоте.

2 ответа 2

0

Плохо, что вы поленились добавить html. Можно попробовать так.

html {
  font-size: 1vh;
}

.wrapper {
  padding: 6.5rem 0;
}

.logo_block {
  padding: 0 0 1rem;
}

.logo_block .logo {
  width: 19.4rem;
}

.content_block {
  padding: 0 1.9rem;
}

.image_desktop {
  width: auto;
  max-width: 90vw;
  aspect-ratio: 4/3;
}

.text_block {
  margin: -15.5rem auto 4.2rem;
  max-width: 64rem;
}

.text_block .subtitle {
  margin: 0 0 1.4rem;
  font-size: 2.4rem;
}

.text_block .main_title {
  font-size: 7.4rem;
}

.text_block .description {
  font-size: 2.77rem;
}

.text_block .promocode {
  margin: 0 0.5rem;
  padding: 0.4rem 1.4rem;
  border: 0.2rem solid #fff;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
}

.button {
  width: 24rem;
  height: 8rem;
  -webkit-border-radius: 4rem;
  -moz-border-radius: 4rem;
  border-radius: 4rem;
  font-size: 2.4rem;
  line-height: 8rem;
}
<div class="wrapper">
  <div class="logo_block">
    <img class="image_desktop" src="http://placebeard.it/640/480" alt="Man">
  </div>
</div>

Очень плохая идея фиксировать значение height для изображения. обычно задают min-height

4
  • Напишите, что изменилось в коде. Commented 11 июл. 2023 в 13:11
  • Так верстка же масштабируется при изменении высоты экрана. Для этого и нужно задавать фиксированный height для всех элементов. Commented 11 июл. 2023 в 13:15
  • Я советую почитать вам про тег <picure> а не лепить костыли через css... там всё отлично масштабируется и подменяется Commented 11 июл. 2023 в 13:20
  • Так причем тут высота картинки, если там еще есть тексты и кнопки, которым тоже задана высота в REM? Commented 11 июл. 2023 в 15:19
0

Решение найдено.

Нужно задать 1vmin вместо 1vh.

html {
    font-size: 1vmin;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.