Отзывчивое изображение с%

Question

У меня есть навигационная система и поле section-top, которое равно 88% с высоким значением (без px). Как я могу реагировать на изображение? Когда я смотрю веб-сайт на своем мобильном устройстве, изображение составляет половину страницы, я хочу, чтобы он был выше страницы.

#views_slideshow_cycle_teaser_section_home_view-block .views-field-field-home-image img{ 
    width:100%; 
    height:100%; 
    margin-top:-50px; 
} 
#section-top{ 
    position:absolute; 
    overflow:hidden; 
    height:88%; 
    width:100%; 
} 

HTML

<div id="section-top"> 
    <div id="featured"> 
     <?php print render($page['featured']);?> 
    </div> 
</div> 

Причина я работаю с height:88%, потому что, когда я установил значение рх, то она не будет покрывать страницу в большем разрешении.

Website

Answer 1

Вы можете применить к изображению width:100; и height:100%, хотя это нарушит соотношение сторон изображения. Для изображения, чтобы заполнить максимальную высоту, не нарушая пропорции, вы можете сделать что-то вроде этого:

width:auto; 
height:100%; 
max-width:100%; 
*zoom:1; 

Answer 2

Попытка использовать DIV с фоновым изображением вместо IMG или удалить фиксированную ширину и высоту IMG.

Answer 3

#views_slideshow_cycle_div_home_view-block_0{ 
width:100% 
} 

и

views_slideshow_cycle_div_home_view-block_2{ 
width:100% 
}