Css flex квадратные блоки

Адаптивный квадратный блок с текстом внутри? [Дубликат]

Другой способ взглянуть на это: Используются 64 бита для представления чисел. Как следствие, не может быть представлено более 2 ** 64 = 18 446 744 073 709 551 616 различных чисел.

Тем не менее, Math говорит, что существует уже бесконечное число десятичных знаков между 0 и 1. IEE 754 определяет кодировку для эффективного использования этих 64 бит для гораздо большего количества пробелов плюс NaN и +/- Infinity, поэтому есть пробелы между точно представленными числами, заполненными числами, только приближены.

К сожалению, 0,3 сидит в промежутке.

19 ответов

Просто создайте обертку с процентным значением для padding-bottom , например:

It приведет к с высотой, равной 75% от ширины ее контейнера (соотношение сторон 4: 3).

Это зависит от того, что для заполнения:

Процент вычисляется относительно ширины блока, содержащего сгенерированный блок [. ] (источник: w3.org , основное внимание)

Значения нижнего поля для других форматов и 100% ширины:

aspect ratio | padding-bottom value --------------|---------------------- 16:9 | 56.25% 4:3 | 75% 3:2 | 66.66% 8:5 | 62.5% 

Размещение содержимого в div:

Чтобы сохранить соотношение сторон div и не позволяйте его содержимому растягивать его, вам нужно добавить абсолютно позиционированного дочернего элемента и растянуть его по краям обертки с помощью:

div.stretchy-wrapper < position: relative; >div.stretchy-wrapper > div

позволяет сказать, что у вас есть 2 divs div div — контейнер, а внутренний может быть любым элементом, который вам нужен для поддержания его отношения (img или iframe iframe или что-то еще).

html выглядит следующим образом:

позволяет утверждать, что соотношение «элемент»

=> 4 к 1 или 2 к 1 .

заполнение, если указано в%, оно рассчитывается на основе ширины не высоты. .. так что в основном вам не важно, какая именно ваша высота будет всегда рассчитываться на основе этого. который будет поддерживать соотношение.

Я нашел способ сделать это с помощью CSS, но вы должны быть осторожны, так как это может измениться в зависимости от потока вашего собственного веб-сайта. Я сделал это для того, чтобы вставлять видео с постоянным соотношением сторон в пределах области ширины жидкости моего веб-сайта.

Предположим, что у вас есть встроенное видео:

Затем вы можете разместить все это внутри div с классом «видео». Этот видеокласс, вероятно, будет жидким элементом вашего сайта, который сам по себе не имеет прямых ограничений по высоте, но при изменении размера браузера он будет меняться по ширине в соответствии с потоком веб-сайта. Это будет тот элемент, который вы, вероятно, пытаетесь получить во встроенном видео, сохраняя при этом определенное соотношение сторон видео.

Чтобы сделать это, я поместил изображение перед встроенным объектом в «видео» «класс div.

. Важная часть состоит в том, что изображение имеет правильное соотношение сторон, которое вы хотите сохранить. Кроме того, убедитесь, что размер изображения максимально высок, чем самый маленький, который вы ожидаете от видео (или того, что вы поддерживаете A.R.), чтобы получить на основе вашего макета. Это позволит избежать любых возможных проблем при разрешении изображения при его изменении в процентах. Например, если вы хотите сохранить соотношение сторон 3: 2, не просто используйте изображение 3px на 2px. Он может работать при некоторых обстоятельствах, но я не проверял его, и, вероятно, было бы неплохо избежать.

Вероятно, вы уже должны иметь минимальную ширину, как это определено для жидкостных элементов вашего веб-сайта. Если нет, рекомендуется сделать это, чтобы избежать измельчения элементов или перекрытия, когда окно браузера становится слишком маленьким. В какой-то момент лучше иметь полосу прокрутки. Наименьшая по ширине веб-страница должна быть где-то около ~ 600 пикселей (включая столбцы фиксированной ширины), поскольку разрешение экрана меньше, если только вы не имеете дело с телефонами. .

Я использую полностью прозрачный png, но на самом деле я не думаю, что это имеет значение, если вы сделаете это правильно. Например:

Теперь вы можете добавить CSS, похожий на следующее:

div.video < . ; position: relative; >div.video img.maintainaspectratio < width: 100%; >div.video object < position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; >div.video embed

Убедитесь, что вы также удалили любое явное объявление высоты или ширины внутри объекта и вставлять теги, которые обычно поставляются с копированным / вставленным кодом встраивания.

Способ, которым он работает, зависит от свойств позиции элемента класса видео и элемента, который вы хотите сохранить, определенного формата. Он использует то, как изображение будет поддерживать правильное соотношение сторон при изменении размера элемента. Он сообщает, что все еще находится в элементе видео класса, чтобы получить полную выгоду от недвижимости, предоставляемой динамическим изображением, заставляя ее ширину / высоту до 100% элемента видеокласса корректироваться с помощью изображения.

Возможно, вам придется немного поиграть с ним, чтобы заставить его работать с вашим собственным дизайном, но это действительно на удивление хорошо для меня. Существует общая концепция.

Источник

How to: flexible squares with CSS

How do you maintain a perfect square shape with a responsive layout? The solution appears simple; the only issue is your content. Which if you want to maintain a square shape it should be able to accommodate the content. I’ll show you how to do it in with this quick tip.

The problem

So you have a row of items that you want to maintain a 1:1 ratio. Then as you resize the screen you want those to retain that ratio and adjust at certain breakpoints and continue to with the square shape.

The solution for elements without container

To solve this problem we need to use a percentage padding on the bottom. The value of the padding-bottom must be equal to the width . So if I have a row with four items, that means the padding would need to be 25%.

HTML

Your HTML may look something like this.

CSS required

The basic CSS requires the expected width and padding-bottom . The height is for security, in making sure you start from 0.

The solution for working with grids

If your items are within grid layout, understandably so, this affects the padding-bottom. In this case, it’s just 100% for all.

HTML

Your HTML may look something like this.

CSS required

Essentially the same aside from our values. Depending on your element, it’s possible the width is redundant if it’s a block level element.

Borders can affect dimensions

As it’s common practice having box-sizing set to border-box , adding a border to the outermost element will change the dimensions. This is something to be aware of, and you will need to make adjustments.

An option is to use calc() and subtract the border from the width and padding-bottom . Using box-sizing: content-box , will remove this issue but with that, you create another problem.

Again the solution

I’m a tea drinker, but it’s equally appreciated if you found the article useful.

Next to read

Enhancing horizontal scrolling with flickity.js

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.

iamsteve is a blog written by Steve McKinney, focusing on the design and build of websites. The aim is to bridge the gap in building your design. It started — and remains — a way to encourage self learning and sharing, through a mixture of in depth tutorials and quick tips.

You can find me elsewhere
dribbble, twitter, behance and linkedin.

Источник