Как подогнать изображение под размер экрана?

Question

[Сергей Павлов]

Господа, нужен ваш совет. Суть проблемы: нужно растянуть изображение во весь экран не искажая пропорций. При этом ни в ширину, ни в высоту картинка не должна выходить за пределы экрана (можно, например, поместить изображение в центр, вытянуть на 100% в высоту, а бока обрезать). Как это реализовать силами JS?

Answer 1

[Евгений Петров]

Поскольку люди постоянно пишут «экран», явно не отдавая себе отчёт в том, что это такое, приходится описывать 2 поведения. Тем не менее, для любого из них сначала необходимо посчитать соотношение ширины изображения к его высоте — ratio.

1) Действительно экран
Для этого для контейнера, в котором находится изображение, потребуется применить полноэкранный режим.
Считаем ratio для экрана

screen.width / screen.height

2) Область просмотра браузера (viewport)
Для контейнера потребуется position:fixed для простоты (или position:absolute + подсчёты положения).
Считаем ratio для viewport

document.documentElement.clientWidth / document.documentElement.clientHeight

А теперь осталось сравнить ratio изображения и ratio области для контейнера. Если первое больше — изображение 100% по ширине, а сверху и снизу должны быть полосы. Если же ratio изображения меньше, то полосы слева и справа, а изображение имеет 100% по высоте.

Про то, как располагать изображение по центру, написано миллион и больше статей.

Answer 2

[Александр Таратин]

htmlbook.ru/css/background-size

Answer 3

[hax0r :3]

background-cover: cover;
-moz-background-cover: cover;
-ms-background-cover: cover;
-webkit-background-cover: cover;

все это пропиши в body

Comments

[barkalov]

Только непонятно, что же товарищу именно надо, contain или cover, он сам себе противоречит: "картинка не должна выходить за пределы экрана", но "бока обрезать".

[Александр Таратин]

@metr0 нет таких свойств в css.

Answer 4

[Анна Бакурова]

автору нужно почитать статью
А эмитацию cover Я делаю так

.index-page .video {
position: absolute;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}

function makeup() {
		var $video = $('.index-page video');
		if($window.width() < $video.width()) {
			$video.css({
				marginLeft: -($video.width()-$window.width())/2
			});
		}
	}

	$window.ready(function(){
		makeup();
	});

	$window.resize(function(event) {
		makeup();
	});