Как сделать сжатие блока css
Обновлено: 05.07.2024
Сейчас мы решим 3 проблемы, которые рано или поздно начинают достигать начинающего веб-разработчика при попытках адаптировать сверстанный им сайт.
Проблема. Текст или другой контент начинает выезжать за пределы родительского блока при его сжатии.
Итак, первая проблема напрямую связана с неправильным указанием высоты родительских елементов страницы, в которых и находится тот контент, который начинает выезжать за пределы своего родительского блока.
Часто новички только изучая CSS начинают использовать такие свойства как height и max-height забывая о том, что при уменьшении экрана, контент, находящийся внутри блоков с такими свойствами начинает сжиматься и выходить в нижнюю часть блока (особенно это касается любого текста). Это как сжимать воздушный шар. Мы сжимаем шарик, давление внутри увеличивается и воздух давит на другие его части тем самым расширяя его в другом направлении. Тоже самое и происходит с текстом. Сжимая блок, он уменьшает пространство текста, а текст начинает уходит вниз, пробивая фиксированную высоту своего блока.
Решение. Избавьтесь от фиксированной высоты блоков при адаптации верстки! Для этого просто уберите значения height и max-height в блоках где задумывается их увеличение за счет текста внутри них. Из названий этих свойств видно, что они дают ограничения по высоте блока, а значит если текст достигнет их предела, он будет выходить за него. Не используйте значения height и max-height где нет в них никакой потребности. При адаптации вашей верстки у вас возникнут проблемы на этой почве.
Проблема. Картинка заднего фона не адаптируется под размер своего блока.
Весь нюанс заключается в том, что вы просто не дописываете нужные правила для заднего фона.
Решение. Добавить к блоку в котором стоит наш фон такую часть кода:
А теперь поясняю. Правило background-size: cover говорит браузеру, что размер картинки фона нужно наложить на всю площадь ее родителя при этом пропорционально растягивая её. Этим правилом мы фиксим проблему с ненужным для нас дублированием картинки фона, что превращает весь фон в страшную матрицу картинок при неестественном изменении размера родителя.
Строка кода background-position: center, в свою очередь, размещает картинку фона по центру своего родителя. Здесь ничего объяснять не нужно, это и так довольно легко для понимания.
ВАЖНО! Если вы таким способом делаете фон для какой либо секции или блока на сайте, который априори имеет больший размер картинки своего фона, эта картинка будет иметь ухудшенное разрешение. Это связано с тем, что те свойства, которые мы прописываем к фону заставляют картинку изменять свой размер пропорционально размеру своего родительского блока. Вообщем, просто запомните, что не стоит ставить картинку, например 800×600 фоном для блока размером 1920×1080. Люди увидевшие это будут лишены всяческого чувства сострадания по отношению к вам, когда вас встретят в 10 часов вечера на улице возле вашего дома с ломом в руках.
Как убрать горизонтальную прокрутку?
Проблема. На меньших экранах сайта появляется горизонтальная прокрутка хотя все елементы адаптированы исправно и не вылазят за пределы своих блоков.
Такая проблема может довольно часто появляться даже у опытных верстальщиков. Особенность этой проблемы в том, что иногда совершенно не понятно в чем кроется проблема появления прокрутки. Ты вроде поубирал ненужные марджины, правильно настроил ширину блоков относительно всей страницы, но злополучный скролл все не исчезает.
Решение. Необходимо добавить селектору body свойство overflow-x: hidden. В коде это выглядит так:
После этого, горизонтальная прокрутка будет отключена на всей странице сайта. Однако, учтите, что это свойство не воспринимают некоторые стандартные мобильные браузеры, в особенности, браузер Safari на IOS устройствах.
В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.
Это выглядит вот так:
Давайте разберемся, каким образом можно добиться такого эффекта.
Для примера, давайте рассмотрим следующую ситуацию.
Смотрим на результат, который получился.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.
Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.
Поэтому свойство width:100% можете смело убирать.
В чем же реальная причина таких отступов?
Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.
Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:
Я хочу создать div, который может изменять свою ширину / высоту по мере изменения ширины окна.
есть ли какие-либо правила CSS3, которые позволили бы изменить высоту в соответствии с шириной,при сохранении соотношения сторон?
Я знаю, что могу сделать это через JavaScript, но я бы предпочел использовать только CSS.
просто создайте обертку
это зависит от того, что для заполнения:
Padding-нижние значения для других соотношений сторон и 100% ширины:
размещение контента в div :
чтобы сохранить соотношение сторон div и предотвратить его растягивание, вам нужно добавить абсолютно позиционированный ребенок и растянуть его до краев обертки с помощью:
можно использовать vw для ширина и высота элемента. Это позволяет сохранить соотношение сторон элемента на основе ширины окна просмотра.
кроме того, вы также можете использовать vh для высоты видового экрана или даже vmin / vmax для использования меньшего / большего окна просмотра размеры (обсуждение здесь).
пример: соотношение сторон 1:1
для других соотношений сторон можно использовать следующую таблицу для вычисления значения высоты в соответствии с шириной элемента:
пример: 4x4 сетка квадратных divs
поддержка браузера для блоков vh / vw IE9 + см. canIuse для получения дополнительной информации
Я нашел способ сделать это с помощью CSS, но вы должны быть осторожны, так как это может измениться в зависимости от потока вашего собственного веб-сайта. Я сделал это, чтобы встроить видео с постоянным соотношением сторон в жидкую часть ширины моего веб-сайта.
скажем, у вас есть встроенное видео, как это:
затем вы можете разместить все это внутри div с классом "видео". Этот класс видео, вероятно, будет элементом fluid на вашем веб-сайте таким, что сам по себе он имеет нет прямых ограничений по высоте, но при изменении размера браузера он будет меняться по ширине в соответствии с потоком веб-сайта. Это будет элемент, который вы, вероятно, пытаетесь получить встроенное видео, сохраняя при этом определенное соотношение сторон видео.
для этого я помещаю изображение перед встроенным объектом в класс" видео " div.
. Важная часть заключается в том, что изображение имеет правильное соотношение сторон, которое вы хотите сохранить. Также убедиться размер изображения по крайней мере такой же большой, как самый маленький, который вы ожидаете, что видео (или то, что вы поддерживаете A. R.) будет основано на вашем макете. Это позволит избежать возможных проблем в разрешении изображения при его изменении в процентах. Например, если вы хотите сохранить соотношение сторон 3: 2, не просто используйте изображение 3px на 2px. При некоторых обстоятельствах это может сработать, но я не проверял его, и, вероятно, было бы хорошей идеей избежать этого.
вы должны вероятно, уже есть минимальная ширина, как это определено для жидких элементов вашего веб-сайта. Если нет, это хорошая идея сделать это, чтобы избежать отсечения элементов или перекрытия, когда окно браузера становится слишком маленьким. Лучше иметь полосу прокрутки в какой-то момент. Самая маленькая по ширине веб-страница должна получить где-то около ~600px (включая любые столбцы фиксированной ширины), потому что разрешения экрана не уменьшаются, если вы не имеете дело с удобными для телефона сайтами. .
Я использую полностью прозрачный png, но я не думаю, что это имеет значение, если вы сделаете это правильно. Вот так:
Теперь вы должны иметь возможность добавить CSS, подобный следующему:
убедитесь, что вы также удаляете любое явное объявление высоты или ширины в объекте и вставляете теги, которые обычно поставляются с копией/вставленным кодом вставки.
способ его работы зависит от свойств позиции элемента класса видео и элемент, который вы хотите поддерживать определенное соотношение сторон. Он использует то, как изображение будет поддерживать правильное соотношение сторон при изменении размера элемента. Он говорит, что все остальное находится в элементе класса видео, чтобы в полной мере воспользоваться недвижимостью, предоставляемой динамическим изображением, заставляя его ширину / высоту до 100% элемента класса видео, настраиваемого изображением.
возможно, вам придется немного поиграть с ним, чтобы заставить его работать с вашим собственный дизайн, но это на самом деле работает на удивление хорошо для меня. Есть общая концепция.
чтобы добавить к ответу Web_Designer,
Если вы хотите, чтобы ваш div был шириной, отличной от 100%, вам нужен другой обертывающий div, на котором можно установить ширину:
Эллиот вдохновил меня на это решение-спасибо:
aspectratio.jpg - это полностью прозрачный PNG-файл с размером вашего предпочтительного соотношения сторон, в моем случае 30x10 пикселей.
HTML-код
С помощью CSS3
задает отступ в процентах от ширины содержит элемент
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 вот так:
As @web-tiki уже показывает способ использования vh / vw , мне также нужен способ центрирования на экране, вот фрагмент кода для 9:16 портрет.
translateY будет держать этот центр на экране. calc(100vw * 16 / 9) ожидается рост на 9/16. (100vw * 16 / 9 - 100vh) это высота переполнения, так что, потяните вверх overflow height/2 будет держать его в центре экрана.
для ландшафта, и сохранить 16:9, вы показываете use
коэффициент 9/16 легкость чтобы изменить, не нужно предопределенных 100:56.25 или 100:75 .Если вы хотите сначала обеспечить высоту, вы должны переключить ширину и высоту, например height:100vh;width: calc(100vh * 9 / 16) для портрета 9:16.
если вы хотите адаптироваться для разных размеров экрана, вы также можете заинтересовать
Все три CSS свойства flex-basis, flex-grow и flex-shrink управляют размерами элементов внутри контейнера. Чтобы адаптивно верстать макеты, вам не обойтись без них никак. Технология flexbox пришла на смену флоатов и инлайн-блоков и если вы новичок, то начинайте верстать сразу на флексах. Устаревшие способы верстки, так или иначе, вам доведется увидеть на старых проектах. Вот тогда и узнаете про них, а пока не тратьте напрасно время.
Flex-basis
Flex-basis – это базовый размер блока по главной оси. Обратите внимание, что я говорю именно размер, а не ширина или высота. Это ключевой момент в понимании этого свойства. Все дело в направлении главной оси. Свойство flex-basis отвечает за ширину элемента, если главная ось имеет горизонтальное направление:
flex-direction: row
flex-direction: row-reverse
Свойство flex-direction не нужно прописывать в коде, так как оно задается по умолчанию.
HTML структура
При смене направления главной оси на вертикальное положение, flex-basis отвечает за высоту элемента:
flex-direction: column
flex-direction: column-reverse
Flex-элементы легко перестраиваются в вертикальное положение и управляются через CSS свойство. Вот такая вот магия.
.container display: flex;
flex-direction: column;
>
Мы можем задать элементам ширину (width) или высоту (height), но нужно помнить, что у flex-basis приоритет выше. Так же базовый размер соответствует указанным размерам, пока в контейнере есть свободное место. Когда мы добавляем новые элементы и места на всех не хватает, то базовый размер не соблюдаются, а поровну распределяется между всеми элементами, сильно ужимая их. Так работает адаптация, при уменьшении окна браузера, все элементы начинают сжиматься.
Flex-grow
По умолчанию свойство flex-grow равно 0. Я хочу увеличить ширину у первого и последнего элемент. Добавим им классы, чтобы появилась возможность обращаться к ним индивидуально.
Пропишем каждому по 1.
Мы видим, что ширина первого и последнего элемента выросла в 2 раза по отношению к остальным элементам. Значение flex-grow указывает на то в каких пропорциях элементы будут увеличиваться.
Flex-shrink
Свойство flex-shrink оказывает прямо противоположное действие - за сжатие элементов.
.item-first flex-shrink: 10;
>
.item-last flex-shrink: 10;
>
Первый и последний элементы стали занимать гораздо меньше места, чем другие.
Профессиональные верстальщики применяют укороченную запись - все три свойства объединяют в одно свойство flex. Оно может принимать три параметра:
flex: flex-grow | flex-shrink | flex-basis
Любую теорию надо подкреплять практикой, этот видеокурс умело балансирует между теорией и практическими уроками, после прохождения, которого вы получите реальный опыт верстки.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Читайте также: