Масштабирование изображений в 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 bu 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

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

контейнер img {

width:500px;
height:500px:

}

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

Спасибо Ptiwari.

Answer 5

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