html - 使用 CSS 保持纵横比居中和裁剪缩略图？

Question

我想创建缩略图，但问题是在调整屏幕大小时，图像会留下粉红色(白色)背景。如何强制裁剪图像？

我想要的效果的一个很好的例子来自这个网站，在查看开发人员工作缩略图时，他们会调整大小!: http://riccardozanutta.com/

我的代码笔: 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>