Масштабирование изображений в HTML

Question

Мне нужно отобразить кучу изображений на странице. Изображения имеют разный размер, некоторые очень широкие и очень тонкие. Я хочу положить их в контейнер с фиксированной шириной и фиксированной высотой.

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

Наш контейнер 500x500 и изображение скажем 1000x400, тогда оно будет масштабироваться как 500x200. Аналогично, если изображение 400x1000, тогда масштабированное изображение составляет 200x500. Это можно сделать только с помощью html/css. Любая помощь приветствуется. Благодарю.

Answer 1

Вы можете использовать max-width и max-height свойства CSS, чтобы получить эффект, который вы хотите:

#container img { 
    max-width:500px; 
    max-height:500px: 
} 

Имейте в виду, что это не работает в IE6. Чтобы заставить его работать, вам может понадобиться либо масштабировать сервер изображений, либо использовать выражения, которые неприятны. Существуют и другие способы обхода, которые вы можете найти в google :)

Answer 2

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

Answer 3

№ Это не полностью выполнимо с htm и css.

img{ width: 100% } 

будет отображать изображение 1000x400 как 500x200 бу 400x1000, будет отображаться как 500x1200.

Вы можете использовать javascrpt как:

function scaleimage(id) 
{ 
    var image = document.getElementById(id); 
    if(image.offsetWidth > image.offsetHeight) 
    { 
     if(image.offsetWidth > 500) 
     { 
      image.offsetHeight = image.offsetHeight * 500/image.offsetWidth; 
      image.offsetWidth = 500; 
     } 
    } 
    else 
    { 
     if(image.offsetHeight > 500) 
     { 
      image.offsetWidth = image.offsetWidth * 500/image.offsetHeiht; 
      image.offsetHeight = 500; 
      } 
    } 
} 

Извините за плохое форматирование, кажется, что мой iPhone не поддерживает его.

Answer 4

Лучший способ сделать это на сервере. Или вручную перед загрузкой (если это возможно).

Answer 5

Вы можете использовать ширину и высоту CSS свойства, чтобы получить эффект, который вы хотите:

контейнер IMG {

width:500px; 
height:500px: 

}

Имейте в виду, что эта работа во всех браузерах.

Thanks Ptiwari.