Как сделать чтобы изображение не растягивалось css
Обновлено: 04.07.2024
Flexbox имеет такое поведение, когда он растягивает изображения до их естественной высоты. Другими словами, если у меня есть контейнер flexbox с дочерним изображением, и я изменяю ширину этого изображения, высота не изменяется вообще, и изображение растягивается.
Что вызывает это?
Я добавил этот CodePen, чтобы продемонстрировать, что я имею в виду.
Также добавляем высоту: 100%; чтобы img исправил проблему, я хотел бы знать, почему он также растягивает изображение.
@blonfu, значением по умолчанию во всех браузерах является align-items: stretch / align-self: stretch . Если вы добавите рамку вокруг каждого элемента и удалите его wrap , вы заметите, что все элементы растягиваются во всех браузерах: codepen.io/anon/pen/oLXBVx?editors=1100
Хорошо. Я изучаю это, но с изображениями по-разному работает в Chrome и других браузерах. Chrome не учитывает соотношение сторон, если вы не определяете высоту.
Это растягивается, потому что align-self значение по умолчанию stretch . Установите align-self в center .
Смотрите документацию здесь: align-self
Да, но другой браузер поддерживает соотношение сторон в изображениях. Chrome также не применяет flex-
Если вы не определили ширину изображения и оно находится во flex-контейнере, оно растянется до 100%. align-self: [flex-start, center. others] будет препятствовать тому, чтобы изображение приняло 100% ширины flex-контейнеров. align-self:center исправляет это, конечно, но если вы хотите, чтобы ваше изображение начиналось с начала или конца использования контейнера align-items: flex-start or flex-end
Вы также можете положить align-items: center (или любое другое выравнивание по своему усмотрению) на родителя.
Но если я задаю ширину и высоту с помощью css ( width:150px; height:100px ), изображение будет растянуто, и оно может быть уродливым.
Как Заполнить изображения до определенного размера с помощью CSS и не растягивать?
Пример заполнения и растяжения изображения:
Обратите внимание, что в примере с заполненным изображением выше: сначала размер изображения изменяется до 150x255 (поддерживаемый формат изображения), а затем обрезается до 150x100.
Если вы хотите использовать изображение в качестве фона CSS, есть элегантное решение. Просто используйте cover или contain в свойстве background-size CSS3.
В то время как cover даст вам уменьшенное изображение, contain даст вам уменьшенное изображение. Оба сохранят пропорции пикселя.
Этот подход имеет то преимущество, что он дружелюбен к дисплеям Retina согласно краткому руководству Томаса Фукса.
Стоит отметить, что поддержка браузером обоих атрибутов исключает IE6-8.
Вы можете использовать свойство css object-fit .
Единственный реальный способ - иметь контейнер вокруг вашего изображения и использовать overflow:hidden :
HTML
CSS
Боль в CSS, чтобы делать то, что вы хотите, и центрировать изображение, есть быстрое исправление в jquery, например:
Улучшение в самом популярном ответе на этот вопрос (НЕ принятый).
если вы используете загрузчик
Есть три различия:
Предоставление width:100% по стилю.
Это полезно, если вы используете начальную загрузку и хотите, чтобы изображение растянулось на всю доступную ширину.
Указывать свойство height необязательно. Вы можете удалить или оставить его по своему усмотрению
Кстати, НЕТ необходимости предоставлять атрибуты height и width для элемента image , потому что они будут переопределены стилем.
так что достаточно написать что-то вроде этого.
Решение 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 и просто установить максимальную ширину и максимальную высоту элемента.
Теперь, когда вы измените размер контейнера, изображение будет автоматически расти настолько, насколько это возможно, не выходя за пределы или искажая.
Если вы хотите центрировать изображение вертикально и горизонтально, вы можете сменить контейнер css на:
Построение ответа @Dominic Green с помощью jQuery, вот решение, которое должно работать для изображений, которые либо шире, либо выше или выше, чем широкие.
Возможно, более элегантный способ работы с JavaScript, но это работает.
Я помог создать плагин jQuery под названием Fillmore, который обрабатывает background-size: cover в браузерах, которые его поддерживают, и имеет прокладку для те, которые этого не делают. Посмотрите на это!
Использование контейнера с переполнением: скрытый
EDIT: @Dominic Green избил меня.
Это будет заполнять изображения до определенного размера, не растягивая его или не обрезая его
Я думаю, что уже довольно поздно для этого ответа. В любом случае надеюсь, что это поможет кому-то в будущем. Я столкнулся с проблемой позиционирования карт в угловом положении. Есть карты, отображаемые для массива событий. Если ширина изображения события велика для карты, изображение должно быть показано обрезкой с двух сторон и высотой 100%. Если высота изображения длинная, нижняя часть изображения обрезается, а ширина составляет 100%. Вот мое чистое решение CSS для этого:
Не задавайте контейнерам ширину, равную брикпойнтам
Это решение подходит для мобильных устройств, где прокрутки нет, но не годится для десктопных браузеров, где она есть и занимает место на странице.
Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:
И посмотрим в браузере что получилось. Начнём с мобильных:
На мобильных всё как надо. Десктоп:
На десктопе появилась не только вертикальная прокрутка, но и горизонтальная. Почему?
Потому что вертикальная прокрутка отъела часть ширины окна, и для контента осталось меньше места.
На десктопе body будет меньше ширины окна, поэтому на ширине окна 600px элемент той же ширины не поместится, что и вызовет появление горизонтальной прокрутки.
Есть несколько вариантов решений, в зависимости от того, что требуется сделать, и свободного времени на это.
Вариант с фиксированной колонкой
На макете, как правило, предусмотрены поля. Можно измерить ширину контента без учёта этих полей и использовать это значение, задав колонке выравнивание по центру.
Так контейнер, который мог бы растопырить страницу, оказывается уже, чем доступное пространство, и горизонтальной прокрутки не будет.
Простое и быстрое решение.
Если всё же нужно ограничить ширину колонки вместе с полями внутри, вместо width используйте max-width :
Так колонка не растянется шире заданного значения, а если места окажется недостаточно — сожмётся.
Вариант с резиновой колонкой
Чтобы на узких экранах конент не болтался узкой полосой, а занимал всю доступную ширину, можно сделать иначе: никак не ограничивать ширину контейнера (и он растянется на всю ширину body ), но задать боковые margin или padding .
Контейнер без фиксированной ширины сам подгонится под доступное пространство не вызывая горизонтальную прокрутку, и будет тянуться вместе с окном браузера.
Не забудьте ограничить ширину колонки на десктопе, чтобы страницу не ратстягивало на всё окно, если у пользователя широкий экран.
Минус способа в том, что в этом случае также надо будет предусмотреть резиновое поведение содержимого, чтобы оно не сбивалось в кучу или не размазывалось по странице. Если на это нет времени, просто используйте способ с фиксированной колонкой.
Вариант с фоном на всю ширину страницы
Например, в макете требуется что-то такое:
У шапки фон по ширине страницы, содержимое по центру.
На самом деле, вариант почти ничем не отличается от предыдущих. В случае с резиновой колонкой и паддингами, можно задать фон самой колонке, потому что она и так растянута на ширину страницы. В остальных случаях снаружи контейнера нужно просто задать обёртку, которой и будет задан фон.
Обёртка с фоном не будет ограничиваться по ширине и всегда будет растягиваться по ширине body не вызывая появление прокрутки. При этом содержимое внутри неё будет придерживаться заданной ширины в зависимости от выбранного способа.
Вариант с картинкой на всю ширину страницы
Иногда нужно, чтобы тянулась не вся колонка, а часть содержимого, например, картинка в статье:
В этом случае ширина колонки с текстом делается с помощью какого-то из предыдущих способов, но для картинки потребуется дополнительный код.
Если нужно, чтобы картинка растягивалась и сжималась вместе с контентом, достаточно будет кода для картинки:
Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:
Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:
На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:
Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.
Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .
Горизонтальная прокрутка пропала, всё работает как надо.
Итого
Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.
Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера.
Вот требования к решению:
Заполнять изображением всю страницу без пробелов.
Масштабировать изображение, если нужно.
Сохранять пропорции изображения.
Изображение центрируется на странице.
Изображение не создает никаких полос прокрутки.
Кросс-браузерное решение по возможности.
Не использовать никаких сторонних технологий, например, Flash.
Удивительный, простой и прогрессивный метод CSS3
Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size . Мы используем элемент html (лучше, чем body , так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству background-size ключевого слова cover.
Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)
Используем строчный элемент , размеры которого можно менять в любом браузере. Устанавливаем свойство min-height , чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.
Хитрый ход заключается в использовании медиа запроса для проверки того, что ширина окна браузера меньше ширины изображения, и использование комбинации процентного значения свойства left и отрицательного значения для левого поля, чтобы центрировать фоновое изображение.
Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.
IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования.
IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.
Другой способ решить задачу - поместить строчный элемент на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height , сохраняя коэффициент пропорциональности.
Однако так изображение не центрируется. Поэтому обернем изображение в элемент
будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре.
Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).
Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).
Используем jQuery
Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.
Читайте также: