Как c помощью css сделать картинки одного размера

Многим разработчикам пригодится этот пример, когда необходимо сделать картинки одного размера на сайте, независимо от размера самой картинки.

Пример

HTML


<div class="block_size">
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
</div>

CSS


.block_size{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.block_img {
  padding: 10%; /* размер картинки */
  position: relative;
  overflow: hidden;
  margin-right: 10px;
}
.block_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
}
.block_img img:hover {
  transform: scale(1.1);
}