Картинка выходит за пределы 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 функция, точно не помню, которая уменьшает картинки при загрузке, он легкая, но. я всетаки не помню как правильно писать
357 / 118 / 20
Регистрация: 08.01.2015
Сообщений: 1,361
Записей в блоге: 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>
Картинка по размеру блока
Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit . Оно может иметь такие значения:
object-fit: fill — картинка просто заполняет блок без сохранения пропорций (по умолчанию)
object-fit: cover — картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.
object-fit: contain — вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.
object-fit: none — картинка отображается в своём реальном масштабе
object-fit: scale-down — соответствует либо contain либо none . Из этих вариантов выбирает тот, который меньше.
object-fit: initial — возвращает значение по умолчанию, если ранее изображению было установлено другое значение
object-fit: inherit — значение принимается от родительского элемента
Результат использования свойства object-fit выглядит так:
Изображение из блока DIV вылезает за пределы самого блока, что делать?
А width=»95%» или что-там у вас, на картинку в DIV почему не пробовали?
И div же принимает размеры внутреннего контента. Или он у Вас жёстко привязан по пикселям?
Источник: web-студия — I.CaR Soft
Можно, например, блоку поставить фиксированную ширину и overflow: hidden.
Или картинке поставить max-width нужный.
Или вообще. . экспериментируйте:)
я бы сделал эту картинку как фон, даже если она будет больше блока, вылезать не куда не должна
background: url(img/bg.jpg) img — папка с картинкой, bg.jpg — сама картинка
Для блока (родителя )за границы которого вылезает картинка необходимо применить свойство
overflow: auto;
Картинка, фотография вылазит / выходит за пределы блока, тизера. Решения.
Достал меня мой узкоспециализированный сайт-хобби. Вернее надоело наблюдать посещения в количестве максимум 60 человек в сутки. Самое обидное, что весь контент заношу уже который год один, даже после того, как перевел сайт со статики на Drupal. Народ заходит, читает, пизд копи-пастит контен, но новый никто не собирается добавлять. А хочется ведь чтоб сайт жил полноценной жизнью, писались материалы, комментировались и чтоб посещений, человек 500 в месяц.
Решил сделать другой сайт, с более широкой тематикой. Скорее всего это будет очередной . тысячный сайт которых полно, но зато свой. Подумал, кого-кого, а уж обывателей должно быть предостаточно. Может кому-то термин и покажется обидным, но в большинстве своем мы и есть обыватели, ярких индивидуальностей не так много, и их можно увидеть по телевизору. Собственно так и назвал проект «Обыватель». Как туда заманивать народ — это отдельная «песня», которую необходимо будет решать.
А вот как сделать, чтобы внешний вид сайта хотя бы сразу не отпугивал, это нужно было решать сразу. И дело не столько в надоевшей всем друпалерам стандартной фиксированной теме garland-minnelli, которую решил использовать, а в не защищенности темы от вставки больших / длинных фотографий-картинок. А они скорее всего будут, т.к. обыватель, по своей сути не компьютерный специалист и всякие width, px, Mb для него темный лес.
В зависимости от браузера большие фотографии вылазят за пределы блока портя внешний вид, либо закрывая соседнию информацию, либо ломая верстку.
Существует несколько решений проблемы, и все они годятся для нормальных браузеров: Opera, Firefox. но не для гордого IE6. Конечно можно, как на drupal.ru посылать его владельцев подальше, но посмотрев статистику малопосещаемого сайта обнаружил, что доля IE6 составляет 12%. На мой взгляд это приличный контингент, который не то что послать, а и игнорировать нельзя. Поэтому задача сузилась до — чтоб это правильно работало в IE6.
Засев за интернет нашел следующие решения, являющиеся добавлением в css темы строк кода:
1) overflow: hidden
Одно из распространенных решений, придать блоку это свойство. Часть картинки выходящая за блок будет просто обрезаться. В IE6 в чистом виде не работает. Необходимо добавлять еще и width: а потом «тюнить» css. Данное решение реализовано на drupal.ru. Мне оно не нравится.
2) max-width: 100%
Еще одно решение. Картинка будет автоматически ресайзится до размеров блока. В зависимости от браузера и версии качество отресайзеной картинки будет разным. В IE6 не работает в принципе. Но есть обходной маневр, задание width: expression. Пишут, что эта «гадость» при неудачном раскладе (код в css), может «спалить мозг» IE6. Перепробовал наверное с полсотни вариантов, пока не вырисовалась конструкция меня удовлетворившая:
.node .content img <
max-width : 98% ;
width : expression ( this .offsetWidth > 490 ? «95%» : «this.offsetWidth» ) ;
>
490 — это размер картинки подобраный экспериментально, после которого идет ее автоматическое уменьшение/увеличение на 95% к блоку.
И наверно правильнее вынести width: expression в корректирующий файл темы fix-ie.css (если есть).
3) скрипты js
существуют скрипты, которые исправляют конкретные баги IE6 или полностью делая его «правильным» браузером. Найти такой скрипт и загрузить конструкцией в page.tpl.php
По причине того, что меня устроил вариант 2) до этого варианта руки не дошли.
| Вложение | Размер |
|---|---|
 foto_width_obyvatel-1.jpg |
126.26 КБ |
| foto_width_obyvatel-2.jpg |
47.23 КБ |
| foto_width_obyvatel-3.jpg |
44.53 КБ |
- Drupal6
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии
Arturus 21 декабря 2009 в 7:34
Спасибо, очень полезная подборка полезных рецептов, в своем случае я просто через ImageCache задавал нужный размер.
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
- Реакции
У вас резиновая вёрстка? Если нет, то какой смысл загружать большую картинку? Юзайте imagecache.
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
- Реакции
imagecache спасает если картинку загружать на сайт. А если она будет браться извне?! Повторюсь, это подстраховка от глупого пользователя, который может впиндюрить картинку откуда угодно.
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
- Реакции
Это значит надо разрешать пользователям тэг img, что не есть хорошо.
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
- Реакции