«Это 29-й день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г."
Всем привет, я Frozen Fish🐟, фронтенд водной системы💦, люблю прибамбасы💐, сплошные скульптуры из песка🌲 и хороший брат Hancao🌿 по соседству.
Добро пожаловать, друзья, чтобы добавить меня в WeChat:sudongyuerВтягивайте вас в группу, обсуждайте вместе и с нетерпением ждите роста вместе со всеми🥂～
Прочтите эту статью 🦀
1. Вы узнаете, как сохранить адаптивное соотношение сторон элемента
2. Вы узнаете, что такоеaspect-ratio
3. Как использоватьaspect-ratioУдобно, чтобы элементы сохраняли адаптивное соотношение сторон
Предисловие 🌵
Все мы знаем, что часто сталкиваемся с необходимостью сохранения пропорций элемента во фронтенд-разработке.
Img元素, но помимоimg,vidoeЭтот заменяемый элемент element имеет функцию соотношения сторон, поэтому если другие элементы сохраняют соотношение сторон, это приносит много неудобств в нашу разработку, сегодня я научу вас, как это использовать.aspect-ratioСвойства решают практические проблемы
тело 🦁
Печально известный взлом Padding-Top 💚
Я не знаю, встречали ли вы когда-нибудь такой классический вопрос на собеседовании (пожалуйста, напишите такой, в котором сохраняется соотношение сторон
DIV元素), вы должны использовать решение Padding-Top Hack.
чтоPadding-Top Hack, я не знаю, сталкивались ли вы когда-нибудь с необходимостью, чтобы незаменяемый элемент всегда сохранял соотношение сторон? , как это сделать?Padding-Top Hackявляется наиболее распространенным решением.
Используйте отступы, чтобы сохранить соотношение сторон элементов
*{
padding: 0;
margin: 0;
}
.aspect-ratio-hack {
position: relative;
height: 0;
padding-top: 56.25%;
}
.inner {
background-color: pink;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Выше самый известныйPadding-Top HackПланируй, если бы это был ты, что бы ты сделал, оставь сообщение и скажи мне свой ответ~~
чтоaspect-ratio🌽
aspect-ratioэто очень раннее предложение в W3C保持元素纵横比的规范,но早期Все основные браузеры не поддерживают его должным образом, и теперь основные основные браузеры хорошо поддерживают это нативное свойство css. Цель его появления — решить различные проблемы, с которыми мы сталкиваемся при сохранении соотношения сторон элементов.
W3C
Основные основные браузеры отлично поддерживаются
89% поддержка браузера
как использоватьaspect-ratio🍪
Возьмите то, что мы только что использовали вышеPadding-Top HackДавайте попробуем и посмотрим, насколько хорошо это работает
просто добавь это一行代码Хахахахаха так круто 😂
.inner {
background-color: pink;
color: red;
font-size: 30px;
width: 50%;
text-align: center;
aspect-ratio: auto 2 / 1; //就添加这一行
}
aspect-ratioПодробный разбор 🐳
Синтаксис: соотношение сторон: авто ||
-
auto:Значение по умолчанию, указывающее, что элемент не имеет предпочтительного соотношения сторон и должен изменять размер как обычно. Поэтому для замены элементов, таких как изображения с присущими пропорциями, используйтеДолженсоотношение сторон. -
<ratio>:косой чертой (/), разделенные двумя положительными значениями с пробелами или без них, определяющими ширину и высоту элемента. В случае одного значения второе значение считается равным 1. Расчеты размера с учетом предпочтительного соотношения сторон применяются к размерам указанного блока.box-sizing. -
initial:Применяется настройка свойства по умолчанию, т.е.auto. -
inherit:использоватьaspect-ratioЗначение родителя. -
unset:Удаляет текущее соотношение сторон элемента.
Давайте просто объясним это на примере
html
<div class="preferably-square"></div>
<img class="preferably-square" src="https://source.unsplash.com/random/800x600?iran" alt="">
css
body {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 2rem;
padding: 2rem;
}
.preferably-square {
width: 300px;
aspect-ratio: auto 2 / 1;
}
div {
background-image: linear-gradient(90deg,#ec4899,#ef4444,#f59e0b);
}
img {
}
autoАтрибуты подходят для заменяемых элементов (img, видео элементы, которые сами имеют пропорции)
Используя автоматический атрибут, заменяемый элемент будет продолжать поддерживать исходное соотношение сторон и не будет зависеть от ваших атрибутов CSS.
Видно, что div на картинке подтягивается в соответствии с соотношением сторон 2/1, а с картинкой сохраняется исходное соотношение сторон.
Лучше научить человека ловить рыбу, чем дать ему рыбу.Я выложу адрес codepen.Будет лучше, если вы сами попробуете.
код:код спрей.IO/цвет нижней части листа/распылитель/…
Ссылки 📚
Резюме 🍁
В этой статье мы узнали, что такоеaspect-ratio, и как использовать это свойство, чтобы вам больше не нужно было хранить元素长宽比Волнуясь о том, как мы решали проблему с соотношением сторон в прошлом, разбираясь в сценариях его использования и простых объяснениях, я надеюсь, что мои друзья смогут снова поэкспериментировать своими руками🧪,授人予鱼不如授人以渔, адрес здесьcodepen, маленькие друзья, которые еще не использовали его, попробуйте, улучшите скорость своего развития и женитесь на Бай Фумей как можно скорее, хахахаха 😂
Вывод 🌞
тогда мой每个前端都应该知道的一个css技巧，89%的浏览器都大力支持它🐣Закончилось, цель статьи на самом деле очень простая, то есть для ежедневной работы总结和输出, выведите то, что, по вашему мнению, будет полезно всем,Не важно, готовишь ты или нет, но люби🔥, надеюсь, вам понравится моя статья, я действительно ее пишу, и надеюсь встретить еще друзей-единомышленников через статью, если она вам тоже понравится折腾, добро пожаловать, чтобы добавить меня好友,Вместе沙雕,Вместе进步.
гитхаб🤖:sudongyu
Личный блог 👨💻:блог о замороженной рыбе
vx👦:судонгюэр
写在最后
Друзья, если вам нравится мой口水话Ставьте 🐟🐟 лайк👍 или подписывайтесь➕ это самая большая поддержка для меня.
добавь меня в WeChat:sudongyuer, приглашаем вас присоединиться к группе, вместе изучить интерфейс и стать лучшим инженером~ (QR-код группы находится здесь ->Ложитесь спать рано,Если срок действия QR-кода истек, посмотрите комментарии в точке кипения ссылки.Я размещу последний QR-код в области комментариев.Конечно, вы также можете добавить меня в WeChat и я притяну вас в группу.После все, я тоже интересный фронтенд, и меня не плохо знать 🌟 ~