Русские Блоги
В CSS3 был добавлен новый набор единиц длины vw, vh, vmin, vmax относительно процента окна просмотра, где vw — это единица измерения относительно процента ширины окна просмотра, 1vw = 1% ширины окна просмотра, а vh — относительно высоты области просмотра Единица измерения в процентах, 1vh = 1% высоты области просмотра; vmin — это процентная единица, которая меньше, чем текущая ширина и высота области просмотра, и аналогично, vmax больше, чем текущая ширина и высота области просмотра.
Используя единицу vw, мы можем легко сделать адаптивный квадрат:
Решение 2. Установите вертикальное заполнение, чтобы открыть контейнер
В блочной модели CSS легко упустить из виду расчет процентного соотношения полей и отступов. Согласно правилам, процентные значения margin и padding рассчитываются относительно ширины родительского элемента. Можно обнаружить, что только значение отступа в вертикальном направлении элемента устанавливается на тот же процент, что и ширина, для создания адаптивного квадрата:
Решение 3. Используйте верхний край (padding) псевдоэлементов для поддержки контейнера
Во втором решении мы используем нижний отступ процентного значения
Атрибут открывает внутреннее пространство контейнера, но это приведет к установке максимальной высоты для элемента.
Атрибут недействителен. Причина неудачи -Атрибут max-height ограничен только высотой, Что влияет только на высоту содержимого элемента. Итак, можем ли мы использовать дочерний элемент для поддержки высоты части содержимого, чтобы max-height
Действует ли атрибут? Давай попробуем:
Обновите страницу, а? Почему ничего нет?
Речь идет оmargin collapse Концепция контейнера и псевдоэлемента была свернута в вертикальном направлении, поэтому мы представилиУвеличьте высоту родительского элементаНе появился. Способ справиться с этим — запустить BFC на родительском элементе.
Вы сказали, что высота будет переполняться при добавлении содержимого внутри элемента? В такой ситуации вы можете поместить контент в отдельный блок контента и использовать абсолютное позиционирование, чтобы исключить занимаемое пространство.
Заключение
Выше представлены три схемы, которые я сейчас придумываю для создания адаптивных квадратов, отбрасывая относительную единицу области просмотра в CSS3 и в основном используя процентное значение полей и отступов относительно ширины ширина родительского элемента рассчитана
, чтобы сделать квадрат одинаковой ширины и высоты и адаптивным относительно ширины области просмотра. Если требуется сделать квадрат, который хорошо адаптируется к области просмотра, предполагается, что можно использовать только vh.
— единица измерения
Как сделать адаптивный квадрат на css
Здесь нужно изначально понимать, что ширина элемента вычисляется как процент от его родительской ширины, а его высота вычисляется как процент от высоты его родителя. Поскольку наша ширина и высота вычисляются из разных измерений, квадрат больше не будет сохранять свою форму.
Основным концептуальным и буквальным строительным блоком наиболее отзывчивых форм CSS является прямоугольник. С точки зрения геометрии прямоугольник является параллелограммом, где каждый угол является прямым углом. Это означает, что как только вы узнаете как сделать отзывчивый прямоугольник CSS, вы автоматически узнаете, как сделать отзывчивый квадрат CSS.
Давайте перейдем к созданию, так как оказалось это не сложно.
Это будет по умолчанию:
Здесь видим его сжатым, но описание внутри осталось на мести и не вылазит за рамки.
Если бы вы изменили ширину и высоту в CSS для этого прямоугольника с фиксированным размером в процентах, ваш код не работал бы и ничего не отображалось бы. Причина, по которой это не будет работать, состоит в том, что процентная высота всегда вычисляется на основе высоты элемента, и в этом случае высота элемента всегда будет равна нулю.
Как сделать резиновый квадратный DIV css?
Если позволяет поддержка браузерами, то можно так:
либо дополнительная обертка для элемента либо жс
так ? Ну и вроде резиновый.
Как сделать резиновый квадратный DIV css?
Написать две строчки:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43307
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
A width-responsive perfect square in pure CSS
The resize property — I wasn’t aware you could actually control this past textareas, but stumbled upon it when looking for a way to make a user-resizable div without using JavaScript.
How the square is made
Exit fullscreen mode
Breaking this down:
- width: 100% is to make sure it’s defined as having the same width as its outer, resizable container.
- padding-bottom: 100% is based on a trick in the CSS spec. When specifying a margin or padding by percentage, it’s always based on the width, even if it’s a -top or -bottom property. In this way we get a property that’s equal to the width.
- position: relative is so that I can put stuff inside it without disrupting the padding; any additional content would add content to the box, which would make it a rectangle
- background-color is there so you can see where it is ¯\_(ツ)_/¯
How the circle is made
Once you have any square, making a circle is easy enough. The only trick you really need is border-radius: 50% , but let’s break down the responsive circle a bit more.
Exit fullscreen mode
- position: absolute makes sure that this circle stays within the position: relative square while not adding any in-flow content to it.
- top: 0; bottom: 0; width: 100%; height: 100%; constrains the circle to the exact dimensions of the responsive square. At this point, what we have is a position: absolute container that is an inner copy of our square.
- The border-* properties are used to build the outline of the circle. We have a 4px green solid border, and it has a radius of half the edge of the square.
Quick geometry recap
Here’s an illustration of why 50% is the magic number to make a circle from a square:
The radius of the circle is equal to half the side of the square.