Как сделать диагональ css

Поддерживать соотношение сторон div с CSS

Я хочу создать div, который может изменять свою ширину / высоту по мере изменения ширины окна.

есть ли какие-либо правила CSS3, которые позволили бы изменить высоту в соответствии с шириной,при сохранении соотношения сторон?

Я знаю, что могу сделать это через JavaScript, но я бы предпочел использовать только CSS.

19 ответов

просто создайте обертку

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

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

Padding-нижние значения для других соотношений сторон и 100% ширины:

размещение контента в div :

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

vw подразделения:

можно использовать vw для ширина и высота элемента. Это позволяет сохранить соотношение сторон элемента на основе ширины окна просмотра.

кроме того, вы также можете использовать vh для высоты видового экрана или даже vmin / vmax для использования меньшего / большего окна просмотра размеры (обсуждение здесь).

пример: соотношение сторон 1:1

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

пример: 4×4 сетка квадратных divs

поддержка браузера для блоков vh / vw IE9 + см. canIuse для получения дополнительной информации

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

скажем, у вас есть встроенное видео, как это:

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

для этого я помещаю изображение перед встроенным объектом в класс» видео » div.

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

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

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

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

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

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

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

чтобы добавить к ответу Web_Designer,

Если вы хотите, чтобы ваш div был шириной, отличной от 100%, вам нужен другой обертывающий div, на котором можно установить ширину:

Эллиот вдохновил меня на это решение-спасибо:

HTML-код

С помощью CSS3

Как говорится в здесь на w3schools.com и несколько повторяется в этом принято отвечать, значения заполнения в процентах (акцент мой):

задает отступ в процентах от ширины содержит элемент

Ergo, правильный пример отзывчивого DIV, который сохраняет соотношение сторон 16: 9, выглядит так следует:

основываясь на ваших решениях, которые я сделал какой-то трюк:

когда вы используете его, ваш HTML будет только

использовать его таким способом: CSS:

и имея это, вы просто установите attr data-keep-ratio к высоте / ширине и это все.

вы можете использовать svg. Сделайте положение контейнера / обертки относительным, поместите svg сначала как статически расположенное, а затем поместите абсолютно расположенное содержимое (вверху: 0; слева:0; справа:0; внизу:0;)

пример с пропорциями 16: 9:

изображения.svg: (может быть встроен в src)

обратите внимание, что встроенный svg, похоже, не работает, но вы можете urlencode svg и встроить его в атрибут img src вот так:

для ландшафта, и сохранить 16:9, вы показываете use

если вы хотите адаптироваться для разных размеров экрана, вы также можете заинтересовать

SCSS-лучшее решение в моем случае; использование атрибута данных:

Источник

Блочные элементы

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

Пример 1. Использование блочных элементов

В данном примере абзац (тег

) вставляется внутрь контейнера

. Кстати, ошибкой будет поступить наоборот — добавить

в контейнер (

Ut wisi

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

Ширина блочных элементов

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока ( width ), отступов ( margin ), полей ( padding ) и границ ( border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис 1. Ширина блочного элемента

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

Пример 3. Ширина слоя в процентах

Результат примера показан на рис. 2.

Рис. 2. Отображение ширины слоев в браузере

Ширина первого слоя в данном примере ( layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя ( layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег

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

Высота

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).

Пример 4. Высота слоя

Результат данного примера продемонстрирован на рис. 3.

Рис. 3. Высота блока в разных браузерах

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

Цвет фона

Рис. 4. Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

Рис. 5. Отображение рамки в браузерах

В примере 5 показано, как создать код для получения подобной границы.

Пример 5. Пунктирная рамка

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.

Резюме

Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.

Источник

border-radius

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.5+	3.0+	1.0+	2.1+	1.0+

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Да, относительно ширины блока
Применяется	Ко всем элементам, за исключением таблиц с border-collapse : collapse
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений

Число значений	Результат
1	Радиус указывается для всех четырех уголков.
2	Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3	Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4	По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

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

Рис. 1. Радиус скругления для создания разных типов уголков

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Источник

Как адаптировать сайт под разные разрешения

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

Многие разработчики слишком ленивы, чтобы хоть как-то адаптировать свой сайт: одни проверяют всё только под свой браузер, а другие игнорируют мобильные устройства.

Но чаще всего можно заметить, что сайты плохо адаптированы под разные мониторы и разрешения. Например, вот как выглядит «ВКонтакте» на FullHD-мониторе:

Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Шрифт очень маленький, а контент размещается только на небольшой части экрана. Чтобы комфортно пользоваться им, нужно менять масштаб страницы:

Встроенных настроек для этого нет, в отличие, например, от Telegram:

Такая адаптация — что-то вроде кибертолерантности. Мы должны заботиться об удобстве посетителей наших сайтов, какими бы устройствами, мониторами и браузерами (только не Internet Explorer) они ни пользовались. Поэтому в этой статье мы расскажем, как адаптировать сайт под разные разрешения.

Создаём адаптивные стили

Прежде всего нужно быть уверенным, что ваш сайт не сломается, если пользователь изменит разрешение на 1 пиксель (как это бывает в MS Word). Для этого везде, где только можно, размеры нужно указывать в процентах.

Также при создании сайта полезно помещать его в оболочку (wrapper): она растягивается на весь экран, а сам сайт будет масштабироваться относительно оболочки.

Сам контент, не считая хэдера и футера, не стоит растягивать на всю страницу:

Тут ширина блока с текстом составляет 80% страницы. Если бы не это ограничение, чтение мелкого шрифта с больших мониторов превратилось бы в разминку шеи:

Также вы можете указать максимальную ширину в пикселях:

Тогда при любом размере монитора читать будет более-менее комфортно.

Создаём стили под отдельные разрешения

Как и в случае с тёмной темой, можно подготовить несколько файлов стилей, каждый из которых будет содержать разные размеры для элементов страницы. Начнём со стиля для средних мониторов — normal.css:

Кроме него будут созданы ещё два файла: small.css и big.css. Они добавляются с помощью отдельного элемента link:

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

И остаётся только подключить скрипт, который будет переключать файл стилей:

Кроме переключения стиля, скрипт ещё и сохраняет выбор пользователя в его браузере, чтобы при повторной загрузке страницы подключался именно этот файл. Для этого используется следующий PHP-код:

Можно посмотреть, как это будет выглядеть:

Автоматическое масштабирование

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

В результате страница будет масштабироваться автоматически.

Источник

Одной строкой: новые CSS-команды для фронтендов

Совре­мен­ный CSS шаг­нул дале­ко впе­рёд по срав­не­нию с тем, что он умел в самом нача­ле. То, что рань­ше зани­ма­ло десят­ки строк кода, теперь мож­но сде­лать одной.

Юна Кра­вец, раз­ра­бот­чик в Chrome, запи­са­ла видео, где она пока­зы­ва­ет 10 совре­мен­ных CSS-команд. Мы раз­бе­рём пять из них. Если вы зна­е­те англий­ский, то луч­ше посмот­ри­те ролик, а за при­ме­ра­ми при­хо­ди­те к нам.

👉 Это мате­ри­ал для тех, кто зани­ма­ет­ся вёрст­кой веб-страниц и веб-приложений, при­чём на сред­нем таком уровне. Если для вас тут поло­ви­на непо­нят­на, нач­ни­те с простого:

👉 Grid и Flex

Что­бы вся эта магия рабо­та­ла пра­виль­но, мы будем исполь­зо­вать её парал­лель­но с коман­да­ми display: grid; и display: flex

display: grid — это когда мы гово­рим бра­у­зе­ру, что эле­мен­ты в этом кон­тей­не­ре будут раз­ме­щать­ся внут­ри вир­ту­аль­ной сет­ки. И внут­ри этой сет­ки мы можем зада­вать раз­ные пра­ви­ла, кото­рые и дела­ют совре­мен­ную CSS-разработку про­ще, чем раньше.

Display: flex — это зна­чит, что всё содер­жи­мое кон­тей­не­ра может гиб­ко менять свои раз­ме­ры по ширине или высо­те, под­стра­и­ва­ясь под содержимое.

Суперцентрирование

Самой боль­шой про­бле­мой в CSS все­гда было раз­ме­ще­ние эле­мен­тов точ­но по цен­тру. Для это­го при­хо­ди­лось писать что-то такое:

Но даже такой избы­точ­ный код ино­гда не давал нуж­ных резуль­та­тов, и эле­мен­ты всё рав­но рас­по­ла­га­лись не стро­го по цен­тру. Теперь всё это мож­но заме­нить одной коман­дой place-items: center. Её нуж­но ска­зать роди­тель­ско­му эле­мен­ту (то есть тому, внут­ри кото­ро­го всё долж­но центроваться):

Для при­ме­ра сде­ла­ем блок с изме­ня­е­мым содер­жи­мым, а внут­ри него по цен­тру поме­стим над­пись «При­вет, это Код!». Если мы изме­ним раз­мер глав­но­го бло­ка, то содер­жи­мое авто­ма­ти­че­ски подви­нет­ся в нуж­ное место и сно­ва ока­жет­ся в цен­тре блока.

Подвижные карточки

В интернет-магазинах часто мож­но встре­тить това­ры, оформ­лен­ные в виде кар­то­чек — 3 или 4 в ряд. Про­бле­ма в том, что если открыть эту стра­ни­цу на малень­ком экране, то кар­точ­ки рас­тя­нут­ся на всю шири­ну и постро­ят­ся одна под дру­гой, хотя сво­бод­но­го места хва­тит, напри­мер, на 2 карточки.

Что­бы сде­лать так, что­бы кар­точ­ки все­гда зани­ма­ли столь­ко места, сколь­ко им нуж­но, но при этом не рас­тя­ги­ва­лись вширь на боль­ших экра­нах, исполь­зу­ют коман­ду flex: 0 1 :

flex: 0 1 150px; /* Задаём ширину карточки */

Рабо­та­ет она так: если кон­тей­нер, в кото­ром лежат кар­точ­ки, рас­тя­ги­ва­ет­ся широ­ко, то кар­точ­ки не рас­тя­ги­ва­ют­ся вме­сте с ним, а оста­ют­ся нуж­ной шири­ны — baseWith. Когда мы умень­ша­ем раз­мер кон­тей­не­ра, то кар­точ­ки оста­ют­ся той же шири­ны, но рас­по­ла­га­ют­ся уже в несколь­ко строк друг под дру­гом. Если кон­тей­нер ста­нет совсем малень­ким, то кар­точ­ки выстро­ят­ся в одну вер­ти­каль­ную колонку.

Если нуж­но, что­бы кар­точ­ки по ширине рас­тя­ги­ва­лись на весь экран при любом раз­ме­ре дис­плея, исполь­зу­ют коман­ду flex: 1 1

Простой сайдбар

Ино­гда быва­ет нуж­но сде­лать боко­вую панель на сай­те, но так, чтобы:

Напри­мер, мы зна­ем, что мини­маль­ная шири­на нашей боко­вой пане­ли — 150 пик­се­лей, тогда на ней всё поме­ща­ет­ся. Если будет боль­ше — отлич­но, но мень­ше нельзя.

Что­бы это реа­ли­зо­вать, исполь­зу­ем коман­ду minmax();, в кото­рую пере­да­дим мини­маль­ную и мак­си­маль­ную шири­ну нашей пане­ли. Эта коман­да сама пой­мёт, какую шири­ну нуж­но исполь­зо­вать: если места мало, то исполь­зу­ем мини­маль­ное зна­че­ние, а если места хва­та­ет — то максимальное.

grid-template-columns: minmax(150px, 25%) 1fr;

Посмот­ри­те на основ­ную коман­ду grid-template-columns — она зада­ёт колон­ки в сет­ке. Сколь­ко пара­мет­ров, столь­ко и коло­нок. В нашем при­ме­ре два параметра:

Если нам нуж­на боко­вая панель поши­ре — мож­но поста­вить 200 или 300 вме­сто 150.

Шаблон «сверху вниз»

Мно­гие сай­ты устро­е­ны так:

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

grid-template-rows: auto 1fr auto;

Классическая раскладка сайта

С помо­щью коман­ды grid-template мож­но сде­лать ком­бо: не толь­ко сде­лать раз­мет­ку «свер­ху вниз», но и доба­вить в основ­ную часть пра­вый и левый сайдба­ры. У них тоже будет фик­си­ро­ван­ная шири­на, а раз­мер будет менять­ся толь­ко у бло­ка с основ­ным содержимым:

Коман­да grid-template: auto 1fr auto / auto fr auto сна­ча­ла зада­ёт три стро­ки нуж­ной высо­ты, а потом три столб­ца нуж­ной шири­ны. Если пара­метр — auto, то раз­мер берёт­ся из настро­ек бло­ка, кото­рый зани­ма­ет эту стро­ку или стол­бец. Пара­метр 1fr гово­рит, что содер­жи­мое бло­ка зани­ма­ет всё остав­ше­е­ся после дру­гих бло­ков место.

Циф­ры 1/2 или 1/4 озна­ча­ют, что блок зани­ма­ет шири­ну от пер­вой до вто­рой линии или от пер­вой до чет­вёр­той. Линии появ­ля­ют­ся в тот момент, когда мы делим кон­тей­нер на три части:

Если напи­са­но grid-column: 2 / 3, то блок зани­ма­ет рас­сто­я­ние от линии 2 до линии 3, а если мы напи­шем grid-column: 1 / 4, то блок зай­мёт всю шири­ну, от 1-й до 4-й линии.

Что дальше

CSS раз­ви­ва­ет­ся и рас­тёт. В буду­щих ста­тьях раз­бе­рём коман­ды, свя­зан­ные с рези­но­вой вёрст­кой сай­та стан­дарт­ны­ми сред­ства­ми HTML.

Источник