在裁剪并居中的图像下方创建一个包含文本的缩略图库

Question

我正在尝试创建一个简单的缩略图库，每个图像下面都有一个文本。但是，由于我处理的图像有不同的大小，我决定在库中裁剪每个图像并居中。我实际上是按照这里给出的说明来做的：

https://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/

然而，图像的文本出现在图像上。我找不到将文本移到下面的方法。我尝试在底部添加填充，但padding-bottom不起作用。我怀疑是由于height: auto线路。不知怎么的，这个设置阻止了我在垂直方向上调整填充。

我的html:

<div class="gallery">
<img src="https://placehold.it/900x500" alt="">
<div class="desc">My Text</div>
</div>
<div class="gallery">
<img src="https://placehold.it/500x900" class="portrait" alt="">
<div class="desc">My long long text</div>
</div>

造型：

.gallery {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
margin-top: 5vh;
margin-right: 0.5vh;
border: 1px solid #ccc;
float: left;
}
.gallery img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.gallery img.portrait {
width: 100%;
height: auto;
}
.desc {
display: block;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

jssfddle:

https://jsfiddle.net/8ue603on/

谢谢！

Answer 1

我认为更好的解决方案是使用适合图像的对象https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.gallery img {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
object-fit: cover;
}

https://jsfiddle.net/csscoder/wymLkq16/3/

Answer 2

1. 为图像设置max-height，它看起来会比设置max-width更干净。

2. 你应该复习CSS的所有主要方面，因为这样你就会知道object-fit，你可以在MDN中进行实验。

3. 如果你有不同长度的文本，你不能选择除了干扰JavaScript之外的字符数，尽管你不需要这样做。把文本放在span元素内，并将其设置为display: block，这样你在父元素内只有img和span，文本就会出现在图像下方。您可以从溢出的文本中获得省略号。

4. 不要将文本直接放在div中——它们是块级元素。是的，从技术上讲，你可以逃脱惩罚，但当你达到非常高的技能水平时，你会发现对如何使用代码有严格的政策将极大地受益并加快你的项目。