Przycisk w rogu obrazka - ucieka podczas zmniejszania okna

0

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.
screenshot-20181231084642.png
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.
0

wrzuc na http://jsfiddle.net/ i daj linka.

0

zamiast col-sm-4-4 raczej col-sm-4 używaj jakiegoś lepszego IDE edytora devtools google, wtedy pokazuje błędy

0

Nie widzę żebyś w jakikolwiek sposób ustawiał ikonkę wewnątrz wrappera. Daj jej position: absolute; i ustaw względem wrappera (ma już ustawione relative)

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0