Как я могу исправить CSS на моем сайте, чтобы большие изображения не переполняли их контейнер?

Question

У меня действительно крутой сайт, который позволяет людям загружать изображения. Иногда изображения действительно очень большие, как показано в следующем разделе:

Переполнение http://img242.imageshack.us/img242/6711/overflowds1.png

Есть ли стиль, который я могу добавить в свои DIV, чтобы это исправить?

Answer 1

Установите свойство CSS переполнения в div на одно из следующих:

overflow: auto;    /* Adds scrollbars only when necessary */
overflow: scroll;  /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden;  /* Hides any content that overflows */

Answer 2

Вы можете использовать свойство CSS overflow: установите его на hidden или auto, чтобы скрыть содержимое или добавить полосы прокрутки, если необходимо.

Answer 3

Вообще говоря, с большими изображениями вы хотите сделать их миниатюру, а не отображать их автоматически, особенно если они имеют определенный размер.

Использование CSS-атрибутов height и width (или атрибутов height и width) масштабирует изображение, но все равно загружает все. Если его большое, то это может быть проблемой. Лучше создать миниатюру при загрузке, отобразить ее, а затем позволить пользователю щелкнуть по ней, чтобы отобразить полноразмерное изображение.

Answer 4

<style>img { max-width: 100% }</style>

Это заставит браузер изменить размеры изображений, чтобы они помещались в их ячейку. Есть несколько недостатков, один из которых заключается в том, что он явно не будет работать в IE6 (может быть, 7?), И если содержащий элемент имеет отступы, вам понадобится обертка вокруг изображения, чтобы подогнать его.

Answer 5

Еще один замечательный, хотя и не полностью поддерживаемый, - добавление max-width: 400px к вашему изображению.

Answer 6

или, с небольшим кусочком JavaScript, вы можете проверить ширину изображения. если больше чем Xpx, то вы масштабируете до Ypx. Конечно, у вас будет небольшой «щелчок изображения», пока страница не будет полностью загружена.

Вы можете вдохновить себя на любом форуме IPB:)

Answer 7

Если вы не хотите полностью изменять размер фактического файла изображения и хотите сохранить пропорции изображения, то вы можете запросить изображение для его размеров (высоты и ширины), а затем умножить их на необходимый коэффициент, чтобы вписаться в ваш div.

Например, если у вас есть изображение 1024x768 и вы хотите поместить его в делитель шириной 800, вы знаете, что ширина будет 800, а высота будет 768 x (800/1024) = 600. отображая ваше изображение вы можете установить свойства высоты и ширины, как требуется.

Answer 8

Автоматически изменяет размер каждого из загруженных изображений, используя такой набор инструментов, как ImageMagick . Вы также получите более качественные изображения, потому что они будут пересчитывать (а не просто изменять размер).

Затем вы можете создавать красивые миниатюры, превью и другие размеры каждого изображения, которые будут хорошо вписываться в ваши шаблоны.

Answer 9

Вместо использования CSS вы должны выполнить базовую проверку ширины и высоты на стороне вашего сервера, и, если она выходит за определенные пределы, используйте HTML / Javascript для изменения размера изображения. Многие веб-приложения для форумов делают это и часто позволяют щелкнуть, чтобы увеличить изображение.

Затем убедитесь, что вы используете свойство Z-LAYER, чтобы изображение плавало над блоками контента, поэтому, когда изображение расширяется, оно превыше всего.