使用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%;