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

[vave]

Долго гуглил, информации выдает много, но всё не то...

Суть такая, есть 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>

 

[borodatych]

Используйте для этих целей Для просмотра ссылки Войди или Зарегистрируйся.

UPD: Для просмотра ссылки Войди или Зарегистрируйся

 

[v0ff]

гуглится легко, responsive image
можно картинкой как требуется ? в коде непонятно

 

[wiggly]

я бы сделал как то так - Для просмотра ссылки Войди или Зарегистрируйся

 

[borodatych]

гуглится легко, 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>

Похоже то что нужно!

 

[Kongu]

используйте 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;
}