Witam
Próbuje stworzyć grida z obrazkami, a w dolnym lewym rogu przykleić przyciski "+" i "-". Udało się natomiast problem pojawia się kiedy przy zmniejszaniu okna przeglądarki obrazki się skalują. Myślę, że zrzut ekranu wystarczy do wyjaśnienia.
Obrazki po lewaj trzymają się ustalonego wymiaru 100px natomiast te po lewej nie mieszczą się w swojej kolumnie i skalują się.
Poniżej html i css odnoszące się do pojedynczego obrazka.
<div class="col-sm-4-4 col-xs-6 bg-light selected_textile">
<div class="wrapper">
<img data-id="" src="../img/l_t/placeholder.jpg" width="100px" class="img-rounded textilimg">
<span class=" status_icon fa status_icon_del"></span>
</div>
<p></p>
</div>
.status_icon::before {
content: "";
width: 20%;
height: 20%;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 20px;
left: 2px;
bottom: 3px;
}
.status_icon_add::before {
background-color: green;
content:"\F055";
}
.status_icon_del::before {
background-color: #d92129;
content:"\F056"
}
.status_icon_selected::before {
background-color: #008000;
content:"\F00C";
}
.wrapper {
position: relative;
display: inline-block;
padding: 0;
max-height: 100px;
}
.textil{
padding: 0;
}
.textilimg {
margin: 1px 0 1px !important;
min-height: 100%;
}
Z góry dziękuję za pomoc.