Резиновая плитка из картинок

258

03 декабря 2019, 17:20

!Здраствуйте. Подскажите, как можно сделать вот такую мини-галерею из картинок резиновой. С шириной все в порядке, а высоту никак не задать в процентах. Заранее спасибо)

Answer 1

Высота в % - небольшой хак с помощью

height: 0
padding-bottom: 100%

html, 
body { 
    margin: 0; 
    padding: 0; 
} 
 
ul, 
li { 
    margin: 0; 
    padding: 0; 
} 
 
ul { 
    font-size: 0px; 
} 
 
li { 
    display: inline-block; 
    font-size: 16px; 
    list-style: none; 
    position: relative; 
    width: 25%; 
} 
 
li .bl-img { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 100%; 
} 
 
li .bl-img img { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

<ul class="list-img"> 
    <li> 
        <div class="bl-img"><img src="http://placeimg.com/300/300/an" alt=""></div> 
    </li> 
    <li> 
        <div class="bl-img"><img src="http://placeimg.com/300/300/an" alt=""></div> 
    </li> 
    <li> 
        <div class="bl-img"><img src="http://placeimg.com/300/300/an" alt=""></div> 
    </li> 
    <li> 
        <div class="bl-img"><img src="http://placeimg.com/300/300/an" alt=""></div> 
    </li> 
</ul>

Answer 2

Теоретически высоту можно задать в процентах, но для этого у родительского блока должна быть фиксированная высота. Возможно, вам подойдут единицы измерения vh. height: 80vh; например, будет означать высоту в 80% от общей высоты экрана, тем самым, при изменении высоты экрана, блок всегда будет занимать 80% высоты всей страницы