Hight изменяясь в зависимости от размера экрана

Question

У меня странный вопрос здесь ..

Вот мой CSS:

#rightimage img { 
max-width: 10%; 
} 

#mainbox { 
background: #fff; 
box-shadow: 0px 3px 12px 2px #000; 
padding: 10px; 
width: 56%; 
margin-top: 20px; 
} 

#container { 
margin-left: 11%; 
} 

#rightimgage { 
background: #fff; 
box-shadow: 0px 3px 12px 2px #000; 
padding: 10px; 
position: absolute; 
right: 12%; 
min-width: 25px; 
max-width: 28%; 
margin-top: -0.5%; 
} 

#rightimgage2 { 
background: #fff; 
box-shadow: 0px 3px 12px 2px #000; 
padding: 10px; 
position: absolute; 
right: 83px; 
width: 285px; 
} 

#cssmenu li { 
display: inline-block; 
} 


.rotate { 
-webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
} 

.rotate:hover { 
-webkit-transform: rotate(-7deg); 
-moz-transform: rotate(-7deg); 
-o-transform: rotate(-7deg); 
} 

Это мой HTML:

<div id="rightimgage" style="top: 247px;" class="rotate"> 
<img src="http://#.x10.bz/image1.png" /> 
</div> 

<div id="rightimgage" style="top: 650px;" class="rotate"> 
<img src="http://#.x10.bz/image2.png" /> 
</div> 

<div id="rightimgage" style="top: 1053px;" class="rotate"> 
<img src="http://#.x10.bz/image3.png" /> 
</div> 

<div id="rightimgage" style="top: 1456px;" class="rotate"> 
<img src="http://#.x10.bz/image4.png" /> 
</div> 


<div id="mainbox"> 
<p>RANDOM TEXT HERE...</p> 
</div> 

На 1024 х 768, это выглядит следующим образом: http://prntscr.com/88c4tj Как вы можете видеть, два div друг рядом с ними одинаковы.

Однако при разрешении экрана 1366 x 768 это выглядит так: http://prntscr.com/88c6ab Как вы можете видеть, изображение намного выше, чем в разрешении 1024 x 768.

Как это разрешить, чтобы изображения были одинаковой высоты во всех разрешениях?

Answer 1

Возможно, это margin-top: -0.5%; в вашем #rightimgage. Это значение составляет -0,5% от width. Так что это изменилось бы на более широком экране. См. this question для получения дополнительной помощи: вместо этого вы должны использовать top: -0.5%;. Но тогда вы должны заботиться о style="top: 247px;", который переопределяет значение в файле css.

И вампир:
Вы должны использовать класс для rightimgage. Ваше решение понимается большинством браузеров, но оно официально недействительно ;-)