2014-08-18 2 views
-1

У меня есть изображение в html, и когда я изменяю размер браузера, изображение и текстовые поля также изменяют их размер и положение. Может кто-нибудь объяснить, почему это так?Почему изображение меняет положение при изменении размера браузера

#economy123{ 
position:absolute; 
top:67%; 
left:53%; 
} 

<div class="result-temp" > 
<img id="economy123" src="{{ asset('assets/images/economy123.png') }}" > 
</div> 
+2

Потому что вы используете процент для его размещения. – APAD1

+0

Это просто потому, что вы используете процент, а не фиксированный размер пикселя. –

+0

Из приведенного выше кода следует изменить только позицию (так как это процент), но ссылки на размер вообще отсутствуют. Если размер изменяется тоже, он должен быть определен где-то в процентах. Если нет, мне бы хотелось увидеть демоверсию. –

ответ

0

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

Например:

.result-temp{ 
    width: 400px; 
    height: 400px; 
} 

#economy123{ 
    position:relative; 
    top: 100px; 
    left: 100px; 
    width: 200px; 
    height: 200px; 
} 

<div class="result-temp"> 
    <img id="economy123" src="{{ asset('assets/images/economy123.png') }}" > 
</div> 

Это позволит сохранить изображение в центре даже после того, как браузер изменяет размер.

+1

с использованием piel делает изображение оставаться на том же месте, только когда я изменяю размер в направлении вверх или вниз .... когда я меняю размер обозревателя, а затем меняет положение изображения –

+0

Что такое piel? Что это значит? –

+0

извините его пиксель –

Смежные вопросы