Форум

Александр222 · #1 (**permalink**) 17.07.2014, 16:43

Здравствуйте.
Подскажите пожалуйста, как отцентрировать пропорционально изображение в зависимости от размеров экрана?

Есть такой код
Проверяем высоту экрана и изображения, если высота изображения меньше присваиваем ему высоту окна, ширину при это auto.
Если высота изображения больше ширины экрана, присваиваем ширину.

function backCover(){
	var hWindow = $(window).height();
	var wWindow = $(window).width();
	var hElem = $('.back-cover').find('img').height();
	// alert(1.2*wWindow)
	if(hElem < hWindow){
		$('.back-cover').find('img').css({
			height: hWindow,
			width:'auto'
		});
	}
	else{
		$('.back-cover').find('img').css({
			height:'auto',
			width:1.2*wWindow
			// marginTop:-0.5*$('img').height(),
			// marginLeft:-0.5*$('img').width()
		});
	}
}

Но скрипт работает странно.
В чем моя ошибка?

skrudjmakdak · #2 (**permalink**) 17.07.2014, 16:48

вы хотите изображение на весь экран сделать?

Александр222 · #3 (**permalink**) 17.07.2014, 21:46

Да, чтобы оно растягивалось пропорционально.

рони · #4 (**permalink**) 17.07.2014, 21:59

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

BETEPAH · #5 (**permalink**) 17.07.2014, 22:08

Александр222,
про background-size слышали?

skrudjmakdak · #6 (**permalink**) 17.07.2014, 22:14

даже написал)) точнее спер)

<html>
	<head>
		<title>example</title>
		<style>
		div
		{
		width: 300px;
		height: 400px;
		background-image: url(my_image);
		#background-size: cover;
		overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
		}
		</style>
	</head>
	<body>
		<div style=""></div>
	</body>
</html>

рони · #7 (**permalink**) 17.07.2014, 23:31

Александр222,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  *  {
     margin: 0px;
     padding: 0px;
  }
  img{
    position: absolute;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 jQuery.fn.fullCenter = function () {
    var hWindow = $(window).height()+ 16;
    var wWindow = $(window).width() + 16;
    this.each(function (indx, element) {
        var el = $(element);
        var h = el.outerHeight(true);
        var w = el.outerWidth(true);
        var l = Math.min(hWindow, wWindow);
        if (hWindow * (h / w) > wWindow * (w / h)) el.css({
            height: hWindow,
            marginLeft: (wWindow - w * (hWindow / h)) / 2
        });
        else el.css({
            width: wWindow,
            marginTop: (hWindow - h * (wWindow / w)) / 2
        })
    });
    return this
};
$(window).load(function () {
    $("img").fullCenter()
});
  </script>
</head>

<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
<img src="http://tovar2.ru/userfile/%F0%EE%FF%EB.jpg" alt="">
<img src="http://img-fotki.yandex.ru/get/11/oleg-ivanov1966.20/0_2fa57_e915327f_XL" alt="">
</body>

</html>

Александр222 · #8 (**permalink**) 18.07.2014, 10:19

http://joxi.ru/0rvIU_3JTJBvDlzP5EM
Появляются пробелы.

Растянуть картинку на всю ширину просто, а растянуть пропорционально, чтобы не было пробелов - трудно.

Какая ошибка в мною приведенном коде?
Почему он работает мягко говоря "лагая"

Логика должна быть такой думаю

if(hElem < hWindow){
	$('.back-cover').find('img').css({
		height: hWindow,
		width:'auto'
	});
}
else{
	$('.back-cover').find('img').css({
		height:'auto',
		width:1.2*wWindow
	});
}

Александр222 · #9 (**permalink**) 18.07.2014, 11:16

Вот пример
http://www.benthomsonphoto.com/

рони · #10 (**permalink**) 18.07.2014, 11:19

Александр222, на всякий случай
1. $(window).load
2. подобрать +16 -- это ширина полосы прокрутки -- обычно +20

и сам код выше вы проверяли?

Форум

Справочник

Discord чат

Курсы javascript