Картинка выходит за пределы DIV
Всем доброго времени суток. Такая проблему: php — скрипт на страницу из папки выгружает картинки. Все разной высоты и ширины. Сделал так чтобы эти картинки помещялись в DIVы, но не пойму как регулировать их размеры. Хотелось бы так : дивам задаю к примеру width:200px, height:100px, а картинки сжимались под эти размеры, сохраняя пропорции. пока что только за пределы дива выходят.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Текст выходит за пределы Div’a
Здравствуйте, я надеюсь вы мне поможете советом. Ситуация следующая: Когда я меняю или добавляю.
Текст выходит за пределы div
Вот возникла проблема div фиксированой ширины и высоты если поигратся с маштабом текст выходит за.
Текст выходит за пределы div ucoz
Помогите пожалуйста!На моём сайте картинки и текст выходят за пределы,пожалуйста подскажите что.
Div выходит за пределы родительского блока при масштабировании (+скрин)
Есть внешний div (outer-outer), первый внутренний (outer), второй внутренний (inner) и внутри него.
61 / 61 / 12
Регистрация: 11.12.2009
Сообщений: 248
Попробуйте при выводе задать картинкам width:200px;
Регистрация: 04.07.2013
Сообщений: 16
попробуйте для картинки прописать:
max-width:100%;
если не подойдет, допишите еще и max-height:100%
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
не, можно сделать так: пишите в стилях, родительский элемент, дпустим.
1 2 3 4
.blockForImg img{ width:100%; height:100%; }
но это при условии, что у родителя фиксированая выстоа и ширина.
либо, можно ему тупо написать так:
1 2 3
.blockForImg{ overflow:hidden; }
но это просто скроет картинки за краями блока
ну а вообще, есть в php функция, точно не помню, которая уменьшает картинки при загрузке, он легкая, но. я всетаки не помню как правильно писать
355 / 116 / 20
Регистрация: 08.01.2015
Сообщений: 1,343
Записей в блоге: 1
Сообщение от maximus2011 
но это просто скроет картинки за краями блока
А вот именно — как сделать, чтобы картинка отображалась полностью (масштабировалась) и ничего не скрывалось. Похоже, тег img имеет какие-то особенности.
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Подробнее про поддержку свойства object-fit браузерами
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> .box { width: 100px; height: 100px; border: 1px solid green; margin: 10px; } img { -o-object-fit: cover; object-fit: cover; width: 100px; height: 100px; } style> head> body> div class="box"> img src="https://www.placehold.it/200x293" alt=""> div> div class="box"> img src="https://www.placehold.it/400x293" alt=""> div> div class="box"> img src="https://www.placehold.it/100x215" alt=""> div> div class="box"> img src="https://www.placehold.it/260x233" alt=""> div> div class="box"> img src="https://www.placehold.it/200x200" alt=""> div> body> html>
как сделать что бы при выходе картинки за пределы блока, она там не отображалась?
Есть картинка, которая выходит за пределы блока, как сделать что бы та часть которая выходит за пределы блока не отображалась, т.е. картинка как бы обрубалась?
Отслеживать
задан 27 мая 2020 в 17:04
563 8 8 серебряных знаков 20 20 бронзовых знаков
overflow:hidden?
27 мая 2020 в 17:05
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
В стилях родительского элемента (предположим, он имеет класс parent)
.parent
Либо можно не создавать CSS файл, написать напрямую в HTML:
P.S.: Хорошей практикой считается первый вариант
Отслеживать
ответ дан 27 мая 2020 в 17:07
1,661 7 7 серебряных знаков 15 15 бронзовых знаков
Спасибо большое, очень помогли, никак не мог найти.
27 мая 2020 в 17:12
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Почему картинка вылезает за пределы блока?
Подскажите почему картинка вылезает за пределы блока a?
- Вопрос задан более трёх лет назад
- 40603 просмотра
Комментировать
Решения вопроса 2
Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку
Потому что вы задали display: inline-block;
Сделайте картинку просто блочной или задайте vertical-align: top
https://webref.ru/css/vertical-align
p.s. не используйте id для стилизации, пишите классы.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
whiteredfox @whiteredfox
Я так выровняла картинку внутри ссылки внутри текста. display: inline-block установила у img, а с высотой vertical-align: bottom помогло) Мерси.
Оптимизирую PageSpeed & Performance
Вылазит из-за того, что #header имеет line-height: 60px; а блочно-строчные элементы выровнялись по базовой линии.
Как сделать чтобы img не выходил за div
У нас будут два div
Css:
Пример блока выходящего за пределы блока:
Если вы прочитали стили, то вы увидели, что наш дочерний блок выходит по ширине за пределы родительского блока на 100px(см. padding 0 50px)
И чтобы вот этот выход за пределы блока ликвидировать, то к классу «second» добавим «box-sizing: border-box;»
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Результат — блок, больше не выходит за пределы родительского блока:
Блок выходит за пределы родительского блока — 2.
Еще один пример способа -запрета выхода дочернего блока за пределы родительского.
нам опять понадобится два div
Стили. смотри выше пунктом. для данного примера они аналогичные.
Если мы приведем данный пример выхода за пределы родительского блока, то увидим абсолютно аналогичную историю, что и в первом пункте:
И далее.. второму блоку присвоим свойство display со значением table-cell
.second4 <
width: 600px;
padding: 0 50px;
background: aliceblue;
border: 1px solid;
display: table-cell; >
Блок больше не выходит за пределы родительского блока:
Textarea выходит за пределы блока.
Вообще. эта страница родилась по мотивам «Textarea выходит за пределы блока.«. и множество «Textarea» находятся у меня в админке и эта история. как тот сапожник без сапог.
Ну как-же этот долбаный «Textarea» вылазит за пределы. что только не придумывай.
делаешь width 100%
И малейший padding — . опять все кривое.
Стряхнув с себя пелену сапожника. пора было решить эту задачку навсегда!
Давайте приведем пример «Textarea», который вылазит за пределы родительского блока.
Html:
.first background: #6cd81c;
width: 300px;
height: 50px;
>
.first textarea width: 100%;
padding: 0 20px;
>