Растяжка изображений в столбиках вместе с экраном

vave

Полезный
Регистрация
22 Июн 2007
Сообщения
466
Реакции
16
Долго гуглил, информации выдает много, но всё не то...

Суть такая, есть 3 картинки в DIV, и нужно что бы в зависимости от размера монитора, эти картинки растягивались в процентном соотношении.
Код какой-нибудь такой
Код:
<style>
.stolbik {
float:left;
min-width:30px;
}
.kartinka {
width:100%;
}
</style>

<div class="stolbik"><img class="kartinka" src="1.jpg"/></div>
<div class="stolbik"><img class="kartinka" src="2.jpg"/></div>
<div class="stolbik"><img class="kartinka" src="3.jpg"/></div>
 
гуглится легко, responsive image
можно картинкой как требуется ? в коде непонятно :(
 
гуглится легко, responsive image
можно картинкой как требуется ? в коде непонятно :(
Для просмотра ссылки Войди или Зарегистрируйся!
Код:
<style>
    .layout{ width: 100% }
    .stolbik {
        float:left;
        min-width:30px;
        width: 30%;
    }
    .kartinka {
        width:100%;
    }
</style>
<div class="layout">
    <div class="stolbik"><img class="kartinka" src="https://c2.staticflickr.com/9/8522/8580161577_cfb0c108fe_b.jpg"/></div>
    <div class="stolbik"><img class="kartinka" src="https://c2.staticflickr.com/9/8522/8580161577_cfb0c108fe_b.jpg"/></div>
    <div class="stolbik"><img class="kartinka" src="https://c2.staticflickr.com/9/8522/8580161577_cfb0c108fe_b.jpg"/></div>
</div>
 
  • Нравится
Реакции: vave
Надеюсь понятно нарисовал :)

Для просмотра ссылки Войди или Зарегистрируйся!
Код:
<style>
    .layout{ width: 100% }
    .stolbik {
        float:left;
        min-width:30px;
        width: 30%;
    }
    .kartinka {
        width:100%;
    }
</style>
<div class="layout">
    <div class="stolbik"><img class="kartinka" src="https://c2.staticflickr.com/9/8522/8580161577_cfb0c108fe_b.jpg"/></div>
    <div class="stolbik"><img class="kartinka" src="https://c2.staticflickr.com/9/8522/8580161577_cfb0c108fe_b.jpg"/></div>
    <div class="stolbik"><img class="kartinka" src="https://c2.staticflickr.com/9/8522/8580161577_cfb0c108fe_b.jpg"/></div>
</div>
Похоже то что нужно!
 

Вложения

  • px.jpg
    px.jpg
    59,3 KB · Просмотры: 8
Последнее редактирование модератором:
используйте flexbox

#container {
background-color: green;
display: flex;
flex-flow: row wrap;
flex-wrap: wrap;
justify-content: space-around;
align-content: stretch;
}

.item {
flex: 1;
flex-basis: 200px;
height: 100px;
min-width: 100px;
max-width:200px;
margin: auto;
border: solid black 2px;
background-color: red;
}
 
Назад
Сверху