Иногда возникает необходимость разместить картинку, высота и ширина которой заранее не известна, в прямоугольную область без деформации.
Есть разные вариации этой задачи, и как результат разные способы решения. Данный материал показывает решение на javascript , а так же содержит ссылки на другие варианты решения.
$("a.soBigPic img").load(function() {
var height = this.naturalHeight;
var width = this.naturalWidth;
if(width > height)
{
$(this).css({width : '300px'});
}
else
{
$(this).css({height : '300px'});
}
});
- вариант просто фиксирует картинку по высоте или ширине в зависимости от ее реальных пропорций.
И еще вариант с автоматическим вычислением размера:
function setCurrentWidthAndHeight(w, h) {
var recomendedWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var recomendedHeight = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
deltaWidth=recomendedWidth-w;
deltaHeight=recomendedHeight-h;
picture=document.getElementById("picture");
if (deltaWidth<deltaHeight)
picture.width=recomendedWidth;
else
picture.height=recomendedHeight;
}