X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> как грамотно выровнять картинку по центру экрана, с высостой на весь экран?
mav1
mav1
Topic Starter сообщение 3.4.2014, 16:16; Ответить: mav1
Сообщение #1


Доброго времени суток.

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

Сейчас у меня такой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html><Head><Title></Title>
<style>

#layer1 {

z-index: 1; /* Порядок слоев */
width: auto; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */

}

#layer2 {
position: absolute; /* Абсолютное позиционирование */
width: 100%;
height: 100%; /* Высота слоя с фоном */
z-index: 1; /* Порядок слоев */
}


</style>

</Head>

<Body>

<div id="layer1" align="center"><img src="images/первая фон без кнопки.jpg" width="auto" height="100%" alt=""></div>




</body>
</html>


Картинка то сжимается и растягивается при изменении окна браузера, но в гугл хром она не по центру, а слева, а в опере появляется горизонтальный скролл и тоже не то, что надо. Что еще дописать надо в моем коде?


--------------------
let's make things better
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
PRStudio
PRStudio
сообщение 24.4.2014, 4:36; Ответить: PRStudio
Сообщение #2


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

Как использовать:

HTML:
<a class="ligthbox" href="ссылка на изображение">Что угодно</a>


JS:
[JS]$('.ligthbox').each(function(){
$(this).lightbox({
'lightboxClass' : 'ui-lightbox',
'loadingClass' : 'ui-lightbox-loading'
});
});[/JS]

где lightboxClass - класс контейнера (fader'a), loadingClass - класс того же контейнера при загрузке. Если не нужен лайтбокс, то переделать тоже труда не составит.

Исходник:

[JS](function($){
$.fn.lightbox = function(params){

/**
* params.lightboxClass
* params.loadingClass
*/

var source = $(this).attr('href');
$(this).attr('href','javascript:void(0);');

$(this).click(function(){

var box = $('<div></div>');
var loading = $('<div></div>');

box.attr('class',params.lightboxClass);
box.prependTo($('body'));
box.hide();
box.fadeIn(200);

loading.attr('class',params.loadingClass);
loading.prependTo($('body'));

var img = $('<img>');
img.attr('src',source);
img.load(function(){

loading.stop(true).fadeOut(200,function(){
$(this).remove();
});

var screenW = $(window).width();
var screenH = $(window).height();
var screenAspect = screenW/screenH;

img.appendTo(box);

var imgW = img.width();
var imgH = img.height();
var imgAspect = imgW/imgH;

if (screenAspect >= imgAspect && imgH > screenH){
imgH = screenH;
img.height(imgH);
imgW = img.width();
} else if (screenAspect < imgAspect && imgW > screenW) {
imgW = screenW;
img.width(imgW);
imgH = img.height()
}

img.css({'z-index':'99','position':'absolute','top':'50%','left':'50%','marginTop':-(imgH/2)+'px','marginLeft':-(imgW/2)+'px'});

});

box.click(function(){
$(this).fadeOut(200,function(){
$(this).remove();
});
});

});

}
})(jQuery);[/JS]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
28 freeax 4566 12.4.2024, 1:22
автор: PostMan1
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
148 adw-kupon.ru 19647 8.4.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
18 uahomka 3053 5.4.2024, 5:53
автор: Skyworker
Горячая тема (нет новых ответов) Как бездомные хранят деньги?
81 metvekot 13627 31.3.2024, 12:44
автор: Boymaster
Горячая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
29 metvekot 4268 31.3.2024, 0:17
автор: Liudmila


 



RSS Текстовая версия Сейчас: 16.4.2024, 13:09
Дизайн