ширина изображения

MasterP · July 2, 2011

как сделать так, чтобы картинка увеличивалась по мере увеличения окна, но не вылезала за границы экрана? изменять пропорции нельзя, урезать картинку нельзя. что-то туплю, простите: ничего не работает из того, что пробую...

SelenIT · July 2, 2011

Т.е. картинка должна всегда вплотную вписываться в окно браузера по одному измерению и оставлять запас по оставшемуся? Тогда единственное, что приходит на ум сходу — засунуть картинку во флеш, а флешке задать размеры 100%?100% и scale="showall"... иначе разве что скриптами. Можно, конечно, поколдовать через media queries (напр., при aspect-ratio в одних пределах задавать картинке только width:100%, а за этими пределами — только height:100%), но старые IEшки пролетают...

Int · July 2, 2011

max-widht:100%; max-height:100% не получится? У меня на последнем сайте получилось так сделать с высотой, а сразу два измерения я не пробовал.

MasterP · July 2, 2011

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

я просто не силен в скриптах, может, от того и проблемы=)

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

вот, у меня есть пример:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        function checkWindowSize() {
				if ( $(window).width() < 400 ) { $('body').addClass('tiny'); }
                else { $('body').removeClass('tiny'); }
        }
        checkWindowSize();
        $(window).resize(checkWindowSize);
</script> <!-- проверяем ширину окна -->

этот скрипт добавляет класс tiny ко всем элементам, если ширина окна меньше 400 пикселей.

А как сделать так, чтобы, допустим, если соотношение сторон меньше 4/3, то добавляем класс one, в противном же случае - добавляем класс two.

Для класса one я в стилях укажу width=100%, для класса two height=100%

ПС: 4 к 3 - это соотношение сторон рисунка, который я вставляю

Edited July 2, 2011 by MasterP

MasterP · July 2, 2011

max-widht:100%; max-height:100% не получится? У меня на последнем сайте получилось так сделать с высотой, а сразу два измерения я не пробовал.

я делаю так:

<head>
<style type="text/css">
	#img {max-height:90%; max-width:90%}
</style>
</head>
<body>
<img src="1.png" id="img"/>
</body>

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

Int · July 2, 2011

Вроде размеры экрана о_О

Сейчас сам попробую.

На высоту никак не реагирует, при уменьшении окна картинка уменьшается, но до некоторого предела, а потом перестаёт.

И мне кажется, что max-height работает если задать его в пикселях только

Это всё Firefox

SelenIT · July 2, 2011

Вот так вроде получилось:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Пример</title>
<style>
* { margin:0; padding:0; }

html, body { height:100%; }

#img { display: block; }

@media screen and (max-aspect-ratio: 4/3) {
	#img { width: 100%; }
}
@media screen and (min-aspect-ratio: 4/3) {
	#img { height: 100%; }
}
</style>
<!--[if lte IE 8]>
<script>
onload = onresize = function() {
	var i = document.getElementById('img');
	i.style.width = document.body.clientHeight/document.body.clientWidth < .75 ? 'auto' : '100%';
	i.style.height = document.body.clientHeight/document.body.clientWidth < .75 ? '100%' : 'auto';
}
</script>
<![endif]-->
</head>
<body>
<img id="img" src="http://silverflame.at.tut.by/img/per_aspera.jpg">
</body></html>

Эх, жалко, в IE8 media queries еще не работают, а экспрешны — уже...

SelenIT · July 2, 2011

Вроде размеры экрана о_О
Сейчас сам попробую.
На высоту никак не реагирует, при уменьшении окна картинка уменьшается, но до некоторого предела, а потом перестаёт.
И мне кажется, что max-height работает если задать его в пикселях только
Это всё Firefox

Кстати, работает — если есть от чего рассчитывать и пока размер картинки меньше реального. Последнюю проблему в IE и Хроме до некоторой степени решает добавление к картинке zoom:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Пример</title>
<style>
* { margin:0; padding:0; }

html, body { height:100%; }

#img { display: block; max-width: 100%; max-height: 100%; zoom: 5; }

</style>
<img id="img" src="http://silverflame.at.tut.by/img/per_aspera.jpg">

Размер картинки оказывается "как бы с запасом", и при разумных допущениях она ведет себя почти как надо (в IE при некоторых размерах окна появляется скроллинг из-за ошибок округления). Но вот в FF и Опере (через -нечто-transform:scale(5)) так не получилось — судя по всему, трансформация применяется после -max-нечто, а не до, как zoom.

Как вариант, можно использовать финт с max-размерами и zoom для старых IE (вместо скрипта) в моем предыдущем примере. Но со скриптом результат красивее

MasterP · July 2, 2011

Вот так вроде получилось:

Заработало! всем спасибо огромное)

кстати, в ie 7 работать будет?) просто поддержку ie 7 очень хотелось бы.

Sign In

ширина изображения

Question

MasterP

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

MasterP

Link to comment

Share on other sites

MasterP

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

MasterP

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information