Я хочу загрузить некоторые фотографии с сервера и отобразить каждый из них в отдельном окне, чтобы поле было заполнено, а изображение центрировано (не растянуто), если оно велико. Могу ли я достичь этого, например, с помощью CSS, не зная размер каждого изображения? Может быть, с максимальной шириной?Как разместить изображение в ящике так, чтобы оно соответствовало ширине или высоте, в зависимости от того, что меньше?
Вот пример того, что я хочу:
Вы можете использовать свойство CSS3 background-size.
В частности, вы должны использовать либо background-size:contain, либо background-size:cover.
Из спецификации:
Значения имеют следующие значения:
'содержат'
масштабировать изображение, сохраняя при этом его внутреннюю соотношение сторон (если таковые имеются), чтобы самый большой размер, так что его ширина и высота могут поместиться внутри области позиционирования фона.
«крышка»
Масштабирование изображения, сохраняя при этом его внутреннее соотношение сторон (если таковые имеются), к наименьшему размеру таким образом, что обе его ширина и высота его может полностью покрыть область фона позиционирования.
Источник: http://www.w3.org/TR/css3-background/#the-background-size
Какой вы использовали будет зависеть от соотношения сторон оригинального изображения, которые вы используете.
прокрутки вниз на этом ресурсе, чтобы увидеть некоторые примеры: http://www.css3.info/preview/background-size/
Отлично. Именно то, что я хотел! Большое спасибо! – AME
Рад, что я смог помочь @AME! –
Самый быстрый, что вы можете сделать, это поместить изображение в качестве фонового изображения, которое центрируется:
style="background: url(images/42.png) 50% 50% no-repeat"
изображения меньше, чем поле будет центрировано в коробке. Изображения, которые больше, будут обрезаны.
Недостатком является, нет масштабирования.
Для масштабирования вам нужно будет знать размеры, используйте математику для вычисления величины масштабирования, которая сохранит соотношение сторон и использует фактический элемент, находящийся внутри контейнера обрезки, который использует «переполнение: скрытое».
Это не будет масштабировать изображение вообще, и это то, что он пытается сделать. – idrumgood
Разве это не обрезание части изображения? Я думаю, что OP хочет его масштабировать. – j08691
Да, этот ответ самопровозглашен как «быстрое решение». Позднее я добавил разъяснения, что он не делает масштабирования. –
Вот что вы делаете. Если, например, изображение находится внутри DIV с идентификатором, называемым «боксер». Теперь вы создадите CSS, который автоматически изменит размер каждого изображения, находящегося внутри DIV, с помощью идентификатора «боксер». CSS будет выглядеть так:
#boxer img {
Width: 600px
Height: 600px;
}
Вышеупомянутый CSS автоматически изменит все изображения, которые вы ввели в спецификации в CSS.Это будет соответствовать коробке с идентификатором «боксер» точно, если размеры соответствуют размерам CSS. Вы можете просто сделать 100% как по ширине, так и по высоте, таким образом, чтобы она соответствовала размеру.
Это растянуло бы изображение и уничтожило бы его пропорции – AME
Вы выплевываете его в html или у вас есть что-то серверная обработка? –