각 이미지 아래에 텍스트가있는 간단한 썸네일 갤러리를 만들려고합니다. 하지만 제가 다루고있는 이미지는 크기가 다양하기 때문에 갤러리에서 각 이미지를 자르고 중앙에 배치하기로 결정했습니다. 실제로 여기에 제공된 지침에 따라이 작업을 수행했습니다.
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;
}
jssfiddle :
https://jsfiddle.net/8ue603on/
감사합니다!
더 나은 솔루션은 이미지 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;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다