Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как сделать по центру изображение

Автор: Nebuhadnezzar 29.8.2006, 20:36

Ребят, нужна ваша помощь!

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

Помогите, пожалуйста! smile

Автор: UpL1nK 29.8.2006, 21:27

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

Автор: smartov 29.8.2006, 23:26

Nebuhadnezzar, нужен яваскрипт, которым ты высчитаешь размер изображения минус размер экрана делить на 2.
Вот только часть рисунка то будет не видна. Не советовал бы так делать

Автор: Nebuhadnezzar 30.8.2006, 11:14

"Вот только часть рисунка то будет не видна."
Ну полосы прокрутки-то будут smile

Сам в курсе, что нежелательно, но всё же...

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

А то я в яве мягко сказать, не очень-то. smile

"перечитал раз 15, так и не понял. Как можно центр большего объекта поместить в центр меньшего?"
Ну хорошо, не поместить "в центр", а сделать так, чтобы их центры совпали.
Ну или если совсем по-другому сказать, то чтобы экран встал по центру изображения smile

Автор: smartov 30.8.2006, 11:42

Цитата(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>

Автор: Nebuhadnezzar 30.8.2006, 12:21

"Вниз - да. Вверх - нет"
Оп-па. А можно с этим как-то справиться? А то часть изображения просто отрезается...
Или либо одно либо другое? smile

Автор: smartov 30.8.2006, 13:33

Цитата(Nebuhadnezzar @ 30.8.2006, 11:21

)

Оп-па. А можно с этим как-то справиться?

Наверное можно, если отключит нормальный скроллинг и написать свой ;) Только в это уже сложнее ;) И я примеров таких скриптов не видле, может просто потому что не искал. А может просто потому что никто их не писал, ибо нелогично это. Если картинка больше чем экран, то надо ее поставить так, чтобы можно было просто посмотреть. А то центровать ... я не вижу в этом смысла, если ты видишь - расскажи мне, может тогда подумаю над написанием такого скролла ;)

Автор: Nebuhadnezzar 30.8.2006, 14:52

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

Ну вот столкнулся я с такой ситуацией, когда нужно на странице сделать изображение. Большое smile

И уж в самое распространенное разрешение 1024х768 его уж точно не запихнуть. smile

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

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

Ладно, в общем в любом случае спасибо за помощь;)

Автор: Illuminaty 30.8.2006, 15:55

Вообщем, если на странице не будет ничего кроме изображения, то решение такое:

Код

<?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>

Автор: smartov 30.8.2006, 19:57

Illuminaty, логично! smile

А я то давай сдуру картинку двигать smile

Автор: Illuminaty 30.8.2006, 23:47

Автор: S.A.P. 31.8.2006, 14:02

Пример без скриптов:

Код


<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>

Автор: Illuminaty 31.8.2006, 17:10

S.A.P., твой код не работает. Изображение обрезано будет...

Автор: Nebuhadnezzar 31.8.2006, 19:07

Yeah!=)))
Illuminaty спасибо огромное smile

Всё работает отлично;)

Автор: Illuminaty 31.8.2006, 19:24

Не за что

Автор: max-@ 1.9.2006, 10:05

Можно просто
<body style="background: url(рисунокю.jpg) center center no-repeat;">