Как сделать чтобы блок не растягивался css
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit . Оно может иметь такие значения:
object-fit: fill - картинка просто заполняет блок без сохранения пропорций (по умолчанию)
object-fit: cover - картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.
object-fit: contain - вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.
object-fit: none - картинка отображается в своём реальном масштабе
object-fit: scale-down - соответствует либо contain либо none . Из этих вариантов выбирает тот, который меньше.
object-fit: initial - возвращает значение по умолчанию, если ранее изображению было установлено другое значение
Модуль CSS Overflow содержит функции CSS для обработки прокручиваемого переполнения, отображаемого на визуальных носителях (экранах устройств). CSS использует термин переполнение для описания содержимого блока, которое простирается за пределы одного из его краев, т.е. края области содержимого, поля, границы или отступа.
Управление переполнением
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-
1. Типы переполнения
Существует два типа переполнения, которое используется браузерами: переполнение эффектов рисования и прокручиваемое переполнение.
Первый тип переполнения представляет собой часть блока и его содержимое, которые создают визуальные эффекты за пределами рамки элемента. К визуальным эффектам относятся тень блока, рамки элемента, тень текста, нависающие глифы, контуры и т.д.
Прокручиваемое переполнение представляет собой набор элементов, выходящих за пределы области полей блока, для которых должен быть предусмотрен механизм прокрутки (полоса прокрутки, или скроллбар).
2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow
Эти свойства определяют, будет ли содержимое блока, включая переполнение любых эффектов рисования, обрезано по краю области полей, и если это так, будет ли этот блок контейнером прокрутки, позволяющим пользователю прокручивать обрезанные части его содержимого. Применяются к блочным, гибким контейнерам и контейнерам-сеткам.
Свойство overflow-x определяет обработку переполнения в горизонтальном направлении (т.е. переполнение с левой и правой сторон блока), а свойство overflow-y определяет обработку переполнения в вертикальном направлении (т.е. переполнение с верхней и нижней сторон блока).
Свойства не наследуются.
| overflow-x, overflow-y | |
|---|---|
| Значения: | |
| visible | Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков. |
| hidden | Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки. |
| scroll | Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента. |
| auto | Браузер использует механизм прокрутки только при переполнении блока. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство overflow — сокращенное свойство, которое задает значения overflow-x и overflow-y в указанном порядке. Если второе значение опущено, оно копируется из первого.
Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed; . Текст может переполнять блок по высоте, изображения — по высоте и ширине.
| overflow | |
|---|---|
| Значения: | |
| visible | Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков. |
| hidden | Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки. Также предотвращает отображение фона или границ под плавающими элементами, для которых задано свойство float: left / right; . |
| scroll | Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента. |
| auto | Браузер использует механизм прокрутки только при переполнении блока. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
3. Автоматическое многоточие
3.1. Многоточие при переполнении: свойство text-overflow
Свойство позволяет обрезать строчное содержимое в случае, когда оно не умещается в блок-контейнер, визуально обрезая его или отображая многоточием. Текст может переполниться, например, когда ему запрещается перенос, например, из-за white-space: nowrap или отдельное слово слишком длинное, чтобы уместиться.
Свойство работает только при задании следующих условий: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap . Применяется только к блочным контейнерам.
Clearfix хак популярный способ правильного отображения плавающих блоков, позволяющий не прибегать к помощи таблиц при верстке. Необходимость в нем возникает когда вы начинаете замечать, что высота родительского блока DIV не соответствует содержимому наследников. К примеру вы задумали такую организацию блоков у себя на сайте (для наглядности родительский блок выделен желтым цветом, а дочерние — зеленым и красным):
Для чего написали такую HTML страницу:
и к ней соответствующий CSS файл стилей:
Однако в реальности вы получите такую картинку:
Родительский DIV не обнимает дочерние. То есть не растягивается по высоте входящих в него блоков. И никакой ошибки тут нет, просто в верстке используют плавающие блоки (свойство FLOAT). Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. И чтобы родительский DIV учитывал их размер и растягивался по их содержимому необходима небольшая хитрость.
Два способа как растянуть размер родительского DIV по содержимому входящих в него блоков
Раньше я использовал такой дополнительный блок перед закрывающим тегом родительского DIV:
После чего внешний вид страницы соответствовал задуманному:
Второй способ как заставить родительский div растягиваться по высоте дочернего
А родительскому блоку добавить соответствующий класс:
Внешний вид страницы так же будет соответствовать задуманной верстке:
Оба способа хорошо работают. И позволяют решить проблему плавающих блоков, чтобы родительский DIV растягивался по высоте содержимого дочерних.
но если я устанавливаю ширину и высоту с помощью css ( width:150px; height:100px ), изображение будет растянуто, и оно может быть уродливым.
Как заполнить изображения определенного размера с помощью CSS и не растягивая это?
пример заливки и растяжки изображения:
обратите внимание, что в Примере с заполненным изображением выше: сначала изображение изменяется до 150x255 (поддерживается соотношение сторон), а затем оно обрезанные в 150x100.
если вы хотите использовать изображение в качестве фона в CSS, есть элегантное решение. Просто используйте cover или contain на background-size свойство в CSS3.
пока cover даст вам масштабированное изображение, contain даст вам уменьшенное изображение. Оба сохранят соотношение сторон пикселей.
вы можете использовать свойство css object-fit .
единственный реальный способ иметь контейнер вокруг вашего изображения и использовать overflow:hidden :
HTML-код
в CSS
это боль в CSS, чтобы сделать то, что вы хотите, и центрировать изображение, есть быстрое исправление в jquery, например:
на самом деле, это просто вывод из самых upvoted ответ на этот вопрос (не принят).
есть два отличия:
нет необходимости предоставлять height и width атрибуты image элемент, потому что они будут переопределены стилем.
так что достаточно написать что-то вроде этого.
предоставляет width:100% на стиль.
это полезно, если вы используете загрузки и хотите, чтобы изображение растянулось на всю доступную ширину.
Указание height свойство является необязательным, но в моем случае это было хорошо.
CSS решение нет JS и нет фонового изображения:
метод 1 "маржа авто" ( IE8+ - не FF!):
Метод 2 "преобразование" (IE9+ ):
Метод 2 можно использовать для центрирования изображение в контейнере фиксированной ширины / высоты. Оба могут переполняться - и если изображение меньше, чем контейнер, оно все равно будет центрировано.
Метод 3 "двойная обертка" (IE8+ - не FF! ):
метод 4 "Двойная обертка и двойное изображение" ( IE8+ ):
- метод 1 имеет немного лучшую поддержку - вы должны установить ширину или высоту изображения!
- с префиксами Метод 2 также имеет достойную поддержку (от ie9 до ) - Метод 2 не имеет поддержки в Opera mini!
- Метод 3 использует две обертки - может переполнять ширину и высоту.
- метод 4 использует двойное изображение ( один как заполнитель ) это дает некоторые дополнительные накладные пропускной способности, но еще лучше поддерживать кроссбраузерный.
метод 1 и 3, похоже, не работают с Firefox
другое решение-поместить изображение в контейнер с нужной шириной и высотой. Используя этот метод, вам не нужно будет устанавливать изображение в качестве фонового изображения элемента.
затем вы можете сделать это с помощью img tag и просто установите max-width и max-height на элементе.
теперь, когда вы изменяете размер контейнера, изображение будет автоматически расти как можно больше без перехода за пределами границ или искажая.
если вы хотите центр изображения вертикально и горизонтально, вы можете изменить CSS для контейнера:
построение ответа @ Dominic Green с помощью jQuery, вот решение, которое должно работать для изображений, которые либо шире, чем они высоки, либо выше, чем они широки.
существует, вероятно, более элегантный способ выполнения JavaScript, но это работает.
Я помог создать плагин jQuery под названием Филлмор, который обрабатывает background-size: cover в браузерах, которые поддерживают его, и имеет прокладку для тех, кто этого не делает. Посмотри на него!
использование контейнера с переполнением: hidden
EDIT: @Dominic Green избил меня.
это заполнит изображения до определенного размера, не растягивая его или не обрезая его
Я думаю, что для этого ответа уже довольно поздно. В любом случае надеюсь, что это поможет кому-то в будущем. Я столкнулся с проблемой позиционирования карт в angular. Есть карты, отображаемые для массива событий. Если ширина изображения события большая для карты, изображение должно быть показано обрезкой с двух сторон и высотой 100 %. Если высота изображения длинная, нижняя часть изображения обрезается, а ширина-100 %. Вот мое чистое решение css для это:
Читайте также: