Максимальный размер изображения CSS для исходного размера изображения?

Вы можете это сделать? У меня есть пользователи, загружающие изображения в контейнер шириной: 100%, но я не хочу, чтобы изображения были больше их первоначального размера. Большое спасибо!

Ответ 1

Просто не устанавливайте width изображения, только max-width.

img {max-width:100%; height:auto}

( "height: auto" не требуется, но я поставил его там для полноты, как напоминание себе, что хочу, чтобы изображение имело свои естественные пропорции.)

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

Ответ 2

Вы можете установить максимальную ширину изображения в теге стиля на самом изображении. Затем в таблице стилей установите тип отображения "block", ширину в любой процент от требуемого контейнера и высоту до авто. Затем добавьте margin: 0px auto для этого, и он должен идеально центрироваться и никогда не будет больше, чем оригинальный размер.

Если это загруженные пользователем изображения, и вы используете PHP, например, найдите ширину изображения с помощью getImageSize() и программно добавьте тег стиля к изображению.