0

Есть такой код, который показывает простой лоадер (.test):

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes donut-spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .test_wrp {
            width: 200px;
            height: 100px;
            background-color: brown;
        }

        .test {
            display: inline-block;
            border: 4px solid rgba(255, 255, 255, 0.1);
            border-left-color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: donut-spin 1.2s linear infinite;
        }
    </style>
</head>

<body>
    <div class="test_wrp">
        <div class="test"></div>
    </div>
</body>

</html>

Как можно растянуть .test на всю ширину родительского блока с сохранением пропорций, указав только параметр height? (Не указывая weight)

Пробую так:

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes donut-spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    .test_wrp {
      width: 200px;
      height: 100px;
      background-color: brown;
    }
    
    .test {
      display: inline-block;
      border: 4px solid rgba(255, 255, 255, 0.1);
      border-left-color: white;
      border-radius: 50%;
      /* Ширина 100% от родителя */
      height: 100%;
      animation: donut-spin 1.2s linear infinite;
    }
  </style>
</head>

<body>
  <div class="test_wrp">
    <div class="test"></div>
  </div>
</body>

</html>

Но результат печален. Так как указан только параметр высоты, ширина теряется. А я хочу, чтобы можно было указать только высоту, при этом ширина подобралась бы сама (с сохранением пропорций). Как это можно реализовать?

2
  • Ну так у вас он и стал по высоте от родителя. Если хотите по центру, то display: block; margin: auto;
    – Hat
    28 мар 2022 в 11:01
  • @Hat а как быть с шириной? Если указываю только высоту, лоадер теряет нужные пропорции. Запустите, пожалуйста, второй пример кода, и будет видно о чем я говорю
    – user492095
    28 мар 2022 в 11:04

1 ответ 1

2

Если я правильно понял вопрос, то вам надо aspect-ratio

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.test_wrp {
  width: 200px;
  height: 100px;
  background-color: brown;
  text-align: center;
}

.test {
  display: inline-block;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left-color: white;
  border-radius: 50%;
  height: 100%;
  aspect-ratio: 1 /1;
  box-sizing: border-box;
  animation: donut-spin 1.2s linear infinite;
}
<div class="test_wrp">
  <div class="test"></div>
</div>

3
  • Да, то, что нужно!!! Но так как свойство новое, то с поддержкой старых браузеров все печально :( https://caniuse.com/?search=aspect-ratio Может есть еще какие-нибудь способы решения моей проблемы?
    – user492095
    28 мар 2022 в 11:07
  • @user492095 Если надо задавать соотношения высоты и ширины для относительных единиц, можно использовать vw и vh. Можете так задать ширину и высоту. Хотя, думаю, пользователи IE должны были уже привыкнуть, что у них что-то не работает:)
    – Hat
    28 мар 2022 в 11:13
  • @user492095, как вариант полифилы есть, например - npmjs.com/package/postcss-aspect-ratio-polyfill . Но ИЕ и так уже не поддерживается, так что хз 28 мар 2022 в 11:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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