Как вписать картинку в прямоугольную область

30.05.2019

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

Есть разные вариации этой задачи, и как результат разные способы решения. Данный материал показывает решение на 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;
}


Категории: HTML
Яндекс.Метрика