Фиксируем ширину картинки в блоке
Итак, сегодня мы с вами поговорим о том, как заставить картинку не вылезать за контейнер.
❓ Проблема
Подготовка
У нас есть блок container , котором лежит картинка image .
- Html:
- Css:
Вот как это выглядит:
Пока что все в порядке: блок растянут на всю ширину нашего маленького(для удобства) окна. Картинка имеет размер 320×180 пикселей и занимает соответствующее место в блоке.
Суть проблемы
А сейчас зададим контейнеру фиксированную ширину меньшую, чем ширина картинки:
- Css:
Хотелось бы ожидать, что картинка подстроится под ширину контейнера и встроится в него. Но не тут-то было:
Блок уменьшился(смотри по черной границе), а вот картинке, как видим, все равно. Хмм.. Почему так происходит? Давайте разбираться!
❗️ Решение
Немного теории
Как известно, все теги в html делятся на блочные и строчные. Тег img относится как раз к последним.
Одно из характеризующий строчные элементы свойств звучит так:
Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
Теперь стало понятно, почему картинка ведет себя именно так. Она является строчным элементом и на совесть выполняет свою работу — занимает столько места, сколько ей нужно.
Ответ
Решить эту задачку довольно просто — нужно задать картинке определенный размер.
В нашем случае это 120 пикселей. Но вообще задается значение 100% — тогда картинка будет занимать все место в блоке, вне зависимости от его размера. А это то, что нужно при резиновой верстке!
Но как же задать ширину инлайновому элементу? Да очень просто! Нужно сделать его инлайно-блочным: display: inline-block . Свои нативные свойства он не потеряет, но станет восприимчивым к свойствам блочных элементов в целом, и ширине в частности.
- Css:
Задачка решена, мы молодцы ��
�� В заключение
Я понимаю, что эта задачка не выглядит сложной. Но, когда я только начинал свой путь фронтендера она заставила меня помучиться. Надеюсь, новичок, тебе помогла эта статья!
Подписывайтесь на меня в Medium и Telegram. Не забывайте оставлять ваши реакции, это мотивирует меня развиваться и делать контент качественнее.
как воткнуть картинку в div, чтобы она не вылезала за края div
Нужно использовать максимальную ширину картинки, т.е.
Для этого в Bootstrap есть класс img-responsive , благодаря которому изображения занимают всю ширину родительского элемента, не выходя за его границы.
По сути, он состоит из стилей:
Для вашего случая достаточно дополнить код картинки этим классом:
Если изображение находится в div , то в CSS нужно тому самому div задать параметр overflow: hidden :
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.9.4.43609
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать чтобы изображение не выходило за рамки div
У нас будут два div
Пример блока выходящего за пределы блока:
Если вы прочитали стили, то вы увидели, что наш дочерний блок выходит по ширине за пределы родительского блока на 100px(см. padding 0 50px)
И чтобы вот этот выход за пределы блока ликвидировать, то к классу «second» добавим «box-sizing: border-box;»
Результат — блок, больше не выходит за пределы родительского блока:
Блок выходит за пределы родительского блока — 2.
Еще один пример способа -запрета выхода дочернего блока за пределы родительского.
нам опять понадобится два div
Стили. смотри выше пунктом. для данного примера они аналогичные.
Если мы приведем данный пример выхода за пределы родительского блока, то увидим абсолютно аналогичную историю, что и в первом пункте:
И далее.. второму блоку присвоим свойство display со значением table-cell
Блок больше не выходит за пределы родительского блока:
Textarea выходит за пределы блока.
Ну как-же этот долбаный «Textarea» вылазит за пределы. что только не придумывай.
делаешь width 100%
И малейший padding — . опять все кривое.
Стряхнув с себя пелену сапожника. пора было решить эту задачку навсегда!
Давайте приведем пример «Textarea», который вылазит за пределы родительского блока.
.first <
background: #6cd81c;
width: 300px;
height: 50px;
>
.first textarea <
width: 100%;
padding: 0 20px;
>
Выход картинки за пределы родительского блока.
Далее. картинка выходит за пределы блока.
Для примера нам понадобится div в который поместим img с адресом.
Выведем картинку выходящую за пределы блока прямо здесь — как видим — не просто нашего блока не видно, но и вообще наша картинка перекрыла другие блоки. в общем вся страница поломалась! Что делать?
Возьмем этот же пример и зададим нашей картинке «style=»max-width: 100%»»
Смотрим результат -картинка не вышла за пределы блока ппо ширине.
Чтобы картинка не заходила за пределы блока по высоте, то применяем
Здесь мы видим, на примере, что картинка вписалась в размеры по ширине и картинка масштабировалась пропорционально. Здесь мы не преследовали цель вписать картинку в блок — смотри здесь
Свойство overflow
Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы).
Синтаксис
Значения
| Значение | Описание |
|---|---|
| hidden | Скрывает то содержимое, которое вылезло за границы блока. |
| scroll | Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными). |
| auto | Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет. |
| visible | Не скрывает то содержимое, которое вылезло за границы блока. |
Значение по умолчанию: visible .
Пример . Значение visible
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:
Пример . Значение visible
А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):
Пример . Значение hidden
Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно. В противном случае текст расширяет контейнер по высоте — и никакого обрезания не будет:
Пример . Значение scroll
При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):
Пример . Значение auto
При значении auto полосы прокрутки добавляются только, если содержимое вылазит за контейнер. Сейчас их нет, так как все помещается: