Центрировать и обрезать миниатюры с CSS, сохраняя пропорции?

Question

Я хочу создать миниатюру изображений, но проблема в том, что при изменении размера экрана изображения оставляют розовый (белый) фон.Как заставить изображения обрезать?

Хороший пример эффекта, который я хочу получить от этого веб-сайта, при просмотре эскизов работы разработчиков, размер которых они меняют !: http://riccardozanutta.com/

Мой CodePen: https://codepen.io/MariusZMM/pen/MZQrVv

.project-content {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.proCont {
    position: relative;
    margin: 10px;
    height: 270px;
    width: 420px;
    flex-grow: 1;
    width: 30%;
    overflow: hidden;
    background-color: #b44dc2;
}

.proCont img {
    position: absolute;

    /* width: 100%;
    height: auto; */

    width: auto;
    height: 100%;

    /* display: inline-block; */
    /* overflow: hidden; */
    vertical-align: middle;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* background-position: 50%; */
    /* background-size: cover;
    background-repeat: no-repeat;
    background-position: center; */
}

Answer 1

Сделайте изображения на 100% широкими и высокими и используйте object-fit: cover:

.project-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.proCont {
  width: 30%;
  height: 270px;
  margin: 1%;
  background-color: #b44dc2;
}

.proCont img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="project-content">
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
  <a class="proCont" href="#"><img src="https://i.imgur.com/bpnac5F.jpg" alt=""></a>
</div>

Answer 2

подгонка объекта: крышка; работал, мне также нужно было изменить ширину до 100%

https://codepen.io/MariusZMM/pen/gZvvPM

width: 100%;
height: 100%;