Фото с индикатором

by Valeriy Brunov

HTML

<div class="img-square-listing-horizontal">

  <div class="img col col_size_6">
    <div class="img__img img__img_form_square" style='background-image: url(https://stihi.ru/pics/2021/02/01/1776.jpg)'>
      <div class="img__delete">
        <div class="icon icon_align_corner">X</div>
      </div>
    </div>
    <div class="indicator img__indicator">
      <div class="indicator__strip">
        <div class="indicator__weight"></div>
      </div>
      <div class="indicator__value">0%</div>
    </div>
  </div>
  
  <div class="img col col_size_6">
    <div class="img__img img__img_form_square" style='background-image: url(https://stihi.ru/pics/2021/02/01/1776.jpg)'>
      <div class="img__delete">
        <div class="icon icon_align_corner">X</div>
      </div>
    </div>
    <div class="indicator img__indicator">
      <div class="indicator__strip">
        <div class="indicator__weight"></div>
      </div>
      <div class="indicator__value">0%</div>
    </div>
  </div>

</div>

CSS

.img {
  padding-left: 4px;
  padding-bottom: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.img__img {
  position: relative;
  flex-grow: 1;
  background-color: #666;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* border: 1px solid red; */
}

.img__img_form_square:before {
  content: "";
  padding-top: 100%;
  float: left;
}

.img_space_delete {
  padding: 0;
}

.img__indicator {}

.img__delete {
  position: absolute;
  top: 0;
  right: 0;
  
  
}

.icon_align_corner {
  margin-right: -50%;
  margin-left: 50%;
  margin-top: -50%;
  margin-bottom: 50%;
}

col {}

.col_size_1 {
  width: calc(100% / 12);
}

.col_size_2 {
  width: calc((100% / 12) * 2);
}

.col_size_3 {
  width: calc((100% / 12) * 3);
}

.col_size_4 {
  width: calc((100% / 12) * 4);
}

.col_size_5 {
  width: calc((100% / 12) * 5);
}

.col_size_6 {
  width: calc((100% / 12) * 6);
}

.col_size_7 {
  width: calc((100% / 12) * 7);
}

.col_size_8 {
  width: calc((100% / 12) * 8);
}

.col_size_9 {
  width: calc((100% / 12) * 9);
}

.col_size_10 {
  width: calc((100% / 12) * 10);
}

.col_size_11 {
  width: calc((100% / 12) * 11);
}

.col_size_12 {
  width: 100%;
}

.img-square-listing-horizontal {
  display: flex;
  flex-wrap: wrap;
}

.indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px;
  padding-top: 5px;
}

.indicator__strip {
  padding: 1px;
  border: 1px solid #666;
  border-radius: 4px;
  height: 0.3em;
  width: 90%;
}

.indicator__weight {
  height: 100%;
  width: 50%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #666;
}

.indicator__value {
  text-align: center;
}