как воткнуть картинку в div, чтобы она не вылезала за края div
Нужно использовать максимальную ширину картинки, т.е.
Для этого в Bootstrap есть класс img-responsive , благодаря которому изображения занимают всю ширину родительского элемента, не выходя за его границы.
По сути, он состоит из стилей:
Для вашего случая достаточно дополнить код картинки этим классом:
Если изображение находится в div , то в CSS нужно тому самому div задать параметр overflow: hidden :
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43300
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Фиксируем ширину картинки в блоке
Итак, сегодня мы с вами поговорим о том, как заставить картинку не вылезать за контейнер.
❓ Проблема
Подготовка
У нас есть блок container , котором лежит картинка image .
- Html:
- Css:
Вот как это выглядит:
Пока что все в порядке: блок растянут на всю ширину нашего маленького(для удобства) окна. Картинка имеет размер 320×180 пикселей и занимает соответствующее место в блоке.
Суть проблемы
А сейчас зададим контейнеру фиксированную ширину меньшую, чем ширина картинки:
- Css:
Хотелось бы ожидать, что картинка подстроится под ширину контейнера и встроится в него. Но не тут-то было:
Блок уменьшился(смотри по черной границе), а вот картинке, как видим, все равно. Хмм.. Почему так происходит? Давайте разбираться!
❗️ Решение
Немного теории
Как известно, все теги в html делятся на блочные и строчные. Тег img относится как раз к последним.
Одно из характеризующий строчные элементы свойств звучит так:
Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
Теперь стало понятно, почему картинка ведет себя именно так. Она является строчным элементом и на совесть выполняет свою работу — занимает столько места, сколько ей нужно.
Ответ
Решить эту задачку довольно просто — нужно задать картинке определенный размер.
В нашем случае это 120 пикселей. Но вообще задается значение 100% — тогда картинка будет занимать все место в блоке, вне зависимости от его размера. А это то, что нужно при резиновой верстке!
Но как же задать ширину инлайновому элементу? Да очень просто! Нужно сделать его инлайно-блочным: display: inline-block . Свои нативные свойства он не потеряет, но станет восприимчивым к свойствам блочных элементов в целом, и ширине в частности.
- Css:
Задачка решена, мы молодцы ��
�� В заключение
Я понимаю, что эта задачка не выглядит сложной. Но, когда я только начинал свой путь фронтендера она заставила меня помучиться. Надеюсь, новичок, тебе помогла эта статья!
Подписывайтесь на меня в Medium и Telegram. Не забывайте оставлять ваши реакции, это мотивирует меня развиваться и делать контент качественнее.
Как сделать так, чтобы изображение не выезжало за экран?
Делаю презентацию в csss. Нужно сделать слайд, содержащий заголовок и картинку. Код примерно такой:
Вставь javascript, который при загрузке страницы будет высчитывать допустимые размеры и выставлять width и height атрибуты тега img.
Думается мне, что width и height тебе хватит с головой. И margin для разных сторон потыкай.
Думается мне, что width и height тебе хватит с головой
А вот не хватает. Если указывать 100%, то съезжает вниз на высоту заголовка, если в пикселях — то не растягивается в зависимости от размера экрана.
Господи, даже это теперь без javascript люди не могут сделать?
Я не помню точного решения, но в свое время возился с этим для одного сайта. Копай в сторону max-width как для изображения (100%), так и его контейнера, а возможно и html/body тегов. Придется пошаманить, но уж лучше разобраться, чем использовать js где не надо.
есть же reveal.js и deck.js, дальше тред не читал.
Т. е. изображение оборачивать еще в div?
съезжает вниз на высоту заголовка
Логично, ведь у тебя изображение не в блочном контейнере, а заинлайнено в строку.
Я тебя правильно понял?
Еще вариант. Пусть не совсем так как ты требуешь (что в чем лежать и почему), но показывающий что можно сделать гораздо более лаконично, без лишних оберточных тегов и жаваскриптов:
Изображение съезжает вниз на высоту заголовка.
Тогда оно наедет на заголовок.
Выложи пример на jsfiddle и т.п. Не понятно что за проблема.
На CSS кроме < max-width: 100%; >больше вроде нет ничего. Только у контейнера нельзя padding left/right делать. Либо margin, либо в еще один оборачивать для отступов.
Можно воткнуть как надо растянуктый DIV, а у него картинку назначить фоном. У фона параметры гибко крутятся.
Надо, чтобы изображение не вылезало за пределы section, не наезжало на заголовок и поля. Размеры section могут быть произвольные.
Так чем тогда тебе не нравится моя первая реализация?
< overflow: hidden >обрежет элементы за пределами блока.
Если я правильно понял, тебе надо чтобы наверху оставалась полоса заголовка без фона.
Если высота заголовка фиксирована — можно с отступами издокториться. Ну либо флексбокс. И картинку фоном.
Еще вариант — картинку сделать фоном на весь блок, а у заголовка зафорсить непрозрачный фон.
overflow: hidden обрежет картинку. Мне надо, чтобы изображение шло после заголовка и полностью влезало, т.е. его высота должна быть равна 100% — (высота заголовка).
А вообще лучше сделать более универсальный вариант, чтобы кроме заголовка мог быть еще какой-то текст перед изображением. А если можно — то и после него.
Ну ок, высоту 100%. А с шириной как быть? Может ведь не хватить. Или там точно панорама с запасом?
Если высоту «от и до, но с отступом» хочешь, тебе надо второй контейнер заводить, под картинку. Дальше проще всего фоном. Там вообще все что угодно настроить можно.
Второй DIV сообразишь как с отступом растянуть? Если браузер современный — сделай через флексбокс.
Оно обрезается (а нужно, чтобы масштабировалось) и залезает на поля.
Второй DIV тебе надо, барин. На чкартинке % с отступом одновременно не совместить.
Свойство overflow
Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы).
Синтаксис
Значения
| Значение | Описание |
|---|---|
| hidden | Скрывает то содержимое, которое вылезло за границы блока. |
| scroll | Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными). |
| auto | Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет. |
| visible | Не скрывает то содержимое, которое вылезло за границы блока. |
Значение по умолчанию: visible .
Пример . Значение visible
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:
Пример . Значение visible
А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):
Пример . Значение hidden
Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно (в нашем случае height: 40px). В противном случае текст расширяет контейнер по высоте — и никакого обрезания не будет:
Пример . Значение scroll
При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):
Пример . Значение auto
При значении auto полосы прокрутки добавляются только, если содержимое вылазит за контейнер. Сейчас их нет, так как все помещается: