Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Картинки прыгают при увеличении в браузере


Автор: Kossssssss 6.3.2013, 10:57
Здравствуйте форумчане!
Проблема в следующем при масштабировании страницы в браузере картинки начинают прыгать как это исправить?

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Классик-АР Главная</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0" class="frame">
<tr>
<td>

<div id="header">
  <div align="center"><img  width="75%" src="img/Header2.png" />  </div>
</div>




<div id="zub">
<img width="109" align="alClient"  src="img/zub.png" /></div>

<div id="zub2">
<img  src="img/zub.png" /></div>

<div id="zub3">
<img  src="img/zub.png" /></div>

<div id="zub4">
<img  src="img/zub.png" /></div>

<div id="zub5">
<img  src="img/zub.png" /></div>

<div id="zub6">
<img  src="img/zub.png" /></div>

<div id="zub7">
<img  src="img/zub.png" /></div>

</td>
</tr>
</table>
</body>
</html>





Код

*{
    /* A universal CSS reset */
    margin:0;
    }
body{
background-image:url(img/bg11.jpg);
position:relative;
}



#header{
z-index:50;
position:absolute;
padding-top: 10px;
margin:auto;
}


#zub{
    z-index:49;
    position:absolute;
    margin:auto;
    top:110px;
    left: 227px;

    

}

#zub2{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 350px;
}

#zub3{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 470px;
}

#zub4{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 590px;
}

#zub5{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 710px;
}

#zub6{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 825px;
}

#zub7{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 940px;
}


#telo{
width: 73.4%;
background:#ffffff;
margin-left:13.4%;

}



Так при масштабе 100%:
http://pixs.ru/showimage/standartjp_9095652_7310288.jpg

а так при масштабе 150%:
http://pixs.ru/showimage/150jpg_6208260_7310299.jpg

Автор: CruorVult 6.3.2013, 14:39
Потому что изображение хедера указано в процентах (относительно размера окна) а зубы в пикселях  

Автор: Kossssssss 6.3.2013, 15:57
Даже если в процентах зубы ставлю всё равно ни чего не меняется

Автор: Aliance 6.3.2013, 18:01
http://habrahabr.ru/post/42151/

Автор: Kossssssss 7.3.2013, 13:17
Исправьте пожалуйста как правильно должно быть второй день мучаюсь, а понять не могу smile   . Может как то можно это всё это обернуть  во что нибудь??? smile smile smile

Автор: Kossssssss 7.3.2013, 21:18
Решено:

HTML
<div id="zub" >
<a href="demo.html">
<img [COLOR="Red"]style="min-width: 100%; max-width: 100%"[/COLOR]  onmouseover="this.src='img/zubb.png';" onmouseout="this.src='img/zub.png';" alt="image001" src="img/zub.png"   /> </a></div>

<div id="zub2">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub2b.png';" onmouseout="this.src='img/zub2.png';" alt="image001" src="img/zub2.png"  /> </a></div>

<div id="zub3">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub3b.png';" onmouseout="this.src='img/zub3.png';" alt="image001" src="img/zub3.png"  /> </a></div>

<div id="zub4">
<a href="demo.html">
<img style="min-width: 100%; max-width: 100%" onmouseover="this.src='img/zub4b.png';" onmouseout="this.src='img/zub4.png';" alt="image001" src="img/zub4.png"  /> </a></div>

<div id="zub5">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub5b.png';" onmouseout="this.src='img/zub5.png';" alt="image001" src="img/zub5.png"  /> </a></div>

<div id="zub6">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub6b.png';" onmouseout="this.src='img/zub6.png';" alt="image001" src="img/zub6.png"  /> </a></div>

<div id="zub7">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub7b.png';" onmouseout="this.src='img/zub7.png';" alt="image001" src="img/zub7.png"  /> </a></div>


Код



#zub{
    z-index:49;
    position: absolute; 
    top:12%;
    left: 14%;
    [COLOR="red"]width:11%;[/COLOR]    
    
    
}

#zub2{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 24%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub3{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 34%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub4{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 44%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub5{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 54%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub6{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 64%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub7{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 74%;
    [COLOR="red"]width:11%;[/COLOR]
}


только теперь ещё проблемка ухудшилось качество картинок зубов кто подскажет как это исправить?

Автор: SiteVizitka 9.3.2013, 18:33
Не знаю куда там зубы вылетают, но рекомендовал бы не мешать табличную вёрстку сайта с дивной.
И, конечно, размеры и позиционирование зубов д.б. точно таким же способом, как и позиционирование десны.

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

И, судя по дизайну, лучше не пытаться сэкономить на зубах - сделайте одну картинку десны с зубами, это проще в плане позиционирования  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)