Пропорциональное центрирование картинки на бекграунде
Здравствуйте.
Подскажите пожалуйста, как отцентрировать пропорционально изображение в зависимости от размеров экрана? Есть такой код Проверяем высоту экрана и изображения, если высота изображения меньше присваиваем ему высоту окна, ширину при это 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()
});
}
}
Но скрипт работает странно. В чем моя ошибка? |
вы хотите изображение на весь экран сделать?
|
Да, чтобы оно растягивалось пропорционально.
|
Александр222, выбрать картинку -- создать новую на основе её src картинку -- вычислить коэфициент соотношения ширины и высоты -- присвоить первоначальной ширину или высоту окна -- которая из них меньше -- а второй параметр высоту или ширину умножить на полученный ранее коэфициент или 1/коэфициент
2 способ присваивать только или ширину или высоту -- в современных браузерах обычно этого достаточно -- вторая величина увеличится пропорционально |
Александр222,
про background-size слышали? |
даже написал)) точнее спер)
<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>
|
центрирование картинки пропорционально по размерам видимой части
Александр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>
|
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
});
}
|
Вот пример
http://www.benthomsonphoto.com/ |
Александр222, на всякий случай
1. $(window).load 2. подобрать +16 -- это ширина полосы прокрутки -- обычно +20 и сам код выше вы проверяли? |
| Часовой пояс GMT +3, время: 17:45. |