Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как сделать по центру изображение, которое больше экрана? 
V
    Опции темы
Nebuhadnezzar
Дата 29.8.2006, 20:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 29.8.2006

Репутация: нет
Всего: нет
Ребят, нужна ваша помощь!

Вот если изображение поместить между тегами <center> и </center>, то при загрузке страницы оно будет появляться по центру  страницы. Но это работает, если само изображение меньше экрана. А если больше?  Как сделать, чтобы центр изображения, которое само больше экрана, при загрузке совпадал с центром страницы?

Помогите, пожалуйста!smile
PM MAIL   Вверх
UpL1nK
Дата 29.8.2006, 21:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 102
Регистрация: 3.12.2005
Где: Тюмень

Репутация: нет
Всего: нет
перечитал раз 15, так и не понял. Как можно центр большего объекта поместить в центр меньшего?  smile 

Это сообщение отредактировал(а) UpL1nK - 29.8.2006, 21:57
--------------------
Макс
PM MAIL ICQ   Вверх
smartov
Дата 29.8.2006, 23:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259
Nebuhadnezzar, нужен яваскрипт, которым ты высчитаешь размер изображения минус размер экрана делить на 2.
Вот только часть рисунка то будет не видна. Не советовал бы так делать
PM MAIL   Вверх
Nebuhadnezzar
Дата 30.8.2006, 11:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 29.8.2006

Репутация: нет
Всего: нет
"Вот только часть рисунка то будет не видна."
Ну полосы прокрутки-то будутsmile Сам в курсе, что нежелательно, но всё же...


"нужен яваскрипт, которым ты высчитаешь размер изображения минус размер экрана делить на 2." 
Хм... А есть какой-нить знакомый тебе скрипт, который с этим справиться?smile А то я в яве мягко сказать, не очень-то.smile


"перечитал раз 15, так и не понял. Как можно центр большего объекта поместить в центр меньшего?"
Ну хорошо, не поместить "в центр", а сделать так, чтобы их центры совпали.
Ну или если совсем по-другому сказать, то чтобы экран встал по центру изображенияsmile
PM MAIL   Вверх
smartov
Дата 30.8.2006, 11:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259
Цитата(Nebuhadnezzar @  30.8.2006,  10:14 Найти цитируемый пост)
Ну полосы прокрутки-то будут

Вниз - да. Вверх - нет

Цитата(Nebuhadnezzar @  30.8.2006,  10:14 Найти цитируемый пост)
Хм... А есть какой-нить знакомый тебе скрипт, который с этим справиться?

Это не сложно...

Код

<html>
<body>

<img src="test.png" id="myImage">

<script>

window.onload = function() { centerImage(document.getElementById('myImage')); }

function centerImage(image)
{
    image.style.position = 'absolute';
    image.style.left = Math.round((document.body.clientWidth - image.clientWidth) / 2) + 'px';
    image.style.top = Math.round((document.body.clientHeight - image.clientHeight) / 2) + 'px';
}

</script>

</body>
</html>
PM MAIL   Вверх
Nebuhadnezzar
Дата 30.8.2006, 12:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 29.8.2006

Репутация: нет
Всего: нет
"Вниз - да. Вверх - нет"
Оп-па. А можно с этим как-то справиться? А то часть изображения просто отрезается...
Или либо одно либо другое?smile
PM MAIL   Вверх
smartov
Дата 30.8.2006, 13:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259
Цитата(Nebuhadnezzar @  30.8.2006,  11:21 Найти цитируемый пост)
Оп-па. А можно с этим как-то справиться?

Наверное можно, если отключит нормальный скроллинг и написать свой ;) Только в это уже сложнее ;) И я примеров таких скриптов не видле, может просто потому что не искал. А может просто потому что никто их не писал, ибо нелогично это. Если картинка больше чем экран, то надо ее поставить так, чтобы можно было просто посмотреть. А то центровать ... я не вижу в этом смысла, если ты видишь - расскажи мне, может тогда подумаю над написанием такого скролла ;)
PM MAIL   Вверх
Nebuhadnezzar
Дата 30.8.2006, 14:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 29.8.2006

Репутация: нет
Всего: нет
 "Если картинка больше чем экран, то надо ее поставить так, чтобы можно было просто посмотреть. А то центровать ... я не вижу в этом смысла"

Ну вот столкнулся я с такой ситуацией, когда нужно на странице сделать изображение. Большоеsmile  И уж в самое распространенное разрешение 1024х768 его уж точно не запихнуть. smile И так вышло, что эстетически было бы покрасивше, если б при загрузке возникала центральная часть изображения. Ну или по крайней мере в горизонтальной плоскостиsmile

Насколько часто возникает такая необходимость у других - не знаю, по крайней мере искал в поисковиках ответ на свой вопрос и ничего не нашёлsmile

Ладно, в общем в любом случае спасибо за помощь;)
PM MAIL   Вверх
Illuminaty
Дата 30.8.2006, 15:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Вообщем, если на странице не будет ничего кроме изображения, то решение такое:
Код
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css"><!--/*--><![CDATA[/*><!--*/
html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    height: 100%;
}
body {
    overflow: auto;
}
#bigImage {
    border-width: 0px;
}
/*]]>*/--></style>
<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
window.onload = function() { centerImg("bigImage"); }
function centerImg(imageId)
{
    var img = document.getElementById(imageId);
    var deltaX = img.offsetWidth - document.body.offsetWidth;
    deltaX = (deltaX <= 0) ? 0 : Math.round(deltaX / 2);
    var deltaY = img.offsetHeight - document.body.offsetHeight;
    deltaY= (deltaY <= 0) ? 0 : Math.round(deltaY / 2);

    window.scroll(deltaX, deltaY);
}
//--><!]]></script>
</head>
<body> 
<img src="images/big_image.gif" alt="" name="bigImage" width="2048" height="1536" id="bigImage" />
</body>
</html>
PM MAIL ICQ   Вверх
smartov
Дата 30.8.2006, 19:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259
Illuminaty, логично! smile А я то давай сдуру картинку двигать smile
PM MAIL   Вверх
Illuminaty
Дата 30.8.2006, 23:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
 smile 
PM MAIL ICQ   Вверх
S.A.P.
Дата 31.8.2006, 14:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 2
Всего: 71
Пример без скриптов:
Код

<div style="text-align:center; overflow:hidden; width:100%">
    <img src="image.png" style="width:2000px; margin-left:-70%; margin-right:-70%;" />
</div>


или на баграунд повесить
Код

<div style="width:100%; background-image: url('image.png'); background-repeat: no-repeat;  background-position: top center; height:400px"></div>


Это сообщение отредактировал(а) S.A.P. - 31.8.2006, 15:36
PM MAIL   Вверх
Illuminaty
Дата 31.8.2006, 17:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
S.A.P., твой код не работает. Изображение обрезано будет...
PM MAIL ICQ   Вверх
Nebuhadnezzar
Дата 31.8.2006, 19:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 29.8.2006

Репутация: нет
Всего: нет
Yeah!=)))
Illuminaty спасибо огромноеsmile Всё работает отлично;)
PM MAIL   Вверх
Illuminaty
Дата 31.8.2006, 19:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Не за что smile 
PM MAIL ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0534 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.