Изменение размера или ширины в процентах минус значение с помощью jQuery и поддержание соотношения сторон - PullRequest
Новая
       18

Изменение размера или ширины в процентах минус значение с помощью jQuery и поддержание соотношения сторон

0 голосов
/ 09 января 2012

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

HTML: 

<header></header>

<img id="photo" src="http://farm5.staticflickr.com/4031/4718599034_5ab720d0f9_b.jpg" realwidth="1024" realheight="768" />

CSS: 

header {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:150px;
    background-color:#000;
    margin:20px;
}

img {
    position:absolute;
    bottom:10px;
    left:0px;
    max-width:1024px;
    max-height:768px;
    margin-right:20px;
    margin-left:20px;

}

И, jQuery: 

function setSize () {
   var windowHeight = $(window).height();
   var headerHeight = $('header').height();
   var windowWidth = $(window).width();


   $('img').height(windowHeight - headerHeight - 40);

   $('img').width(windowWidth - 40);
}


   $(window).resize(function () {
setSize();
setRatio();
   });

setSize();

Вот JSFiddle.

Чего я не могу сделать и что я хочу сделать, так это сохранить соотношение сторон изображения.Как это можно сделать?

1 Ответ

1 голос
/ 09 января 2012

Если вы измените атрибут высоты изображения NATIVE вместо высоты CSS, ширина автоматически будет соответствовать соотношению сторон. 

$('img').attr('height',(windowHeight - headerHeight - 40)+'px');
...