이미지의 중심을 미리보기 이미지에 표시하는 방법

Question

이것은 아마도 매우 간단 할 것입니다. 그러나 나는 그것을 알아낼 수 없습니다. 이미지가 세로 또는 가로 모드에있는 이미지 갤러리에서 작업하고 있습니다. 갤러리가 균일하게 보일 수 있도록 미리보기 이미지가 동일한 크기가되어야하고 클릭 할 때만 전체 이미지가 표시됩니다. 저는 Zurb Foundation과 SCSS를 사용하고 있습니다. 순간

<div class="img-single column column-block"> 
    <a data-open="galleryModal"> 
    <img src="assets/img-01.jpg" class="thumbnail" alt=""> 
    </a> 
</div> 

.img-single { 
    width: 300px; 
    height: 300px; 

    img { 
     width: 100%; 
     height: 100%; 
    } 
} 

이미지가 300 픽셀로 300 픽셀로 뻗어 : 이 순간에 내 코드입니다. 난 단지 왜곡되지 않고 이미지의 중앙에 이미지의 미리보기 이미지를 표시해야합니다. 나는 또한 vertical-align: middle;을 추가하고 max-width 및 max-height 값으로 재생했지만 아무 것도하지 않았습니다. 어떻게 할 수 있습니까?

Answer 1

div에 background-image을 사용하여 작은 컨테이너에 이미지의 중심을 맞출 수 있습니다.

<div class="thumbnail" style="background: url("assets/img-01.jpg") no-repeat;"></div> 

.thumbnail { 
    background-position: center; 
    width: 50px; 
    height: 50px; 
} 

Answer 2

새로운 object-fit CSS 속성을 활용하고 이미지를 원하는대로 표시 할 수 있습니다. 여기

는 object-fit을 사용하여 배치 이미지의 차이를 보여, 당신을 위해 몇 가지 예제 코드이며, 기본 이미지 : 당신은 img-single와 내 다른 이미지를 배치 할 수

.img-single { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
.img-single img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div class="img-single column column-block"> 
 
    <a data-open="galleryModal"> 
 
    <img src="https://unsplash.it/458/354?image=0" class="thumbnail" alt="Image with object-fit"> 
 
    </a> 
 
</div> 
 

 
<img src="https://unsplash.it/458/354?image=0" alt="Just the image">

원하는 경우 object-position도 있습니다.

희망이있었습니다.

추신 : 나는 또한 overflow 속성을 사용하여 이미지가 번지는 것을 중지했습니다. 감사.

Answer 3

Foundation의 thumbnail 클래스를 제거하면 작동합니다.

HTML (예)

<div class="img-grid row small-up-2 medium-up-3 large-up-4"> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/620/580/animals" class="" alt=""> 
     </a> 
    </div> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/440/780/animals" class="" alt=""> 
     </a> 
    </div> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/460/640/animals" class="" alt=""> 
     </a> 
    </div> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/720/420/animals" class="" alt=""> 
     </a> 
    </div> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/660/400/animals" class="" alt=""> 
     </a> 
    </div> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/480/840/animals" class="" alt=""> 
     </a> 
    </div> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/400/640/animals" class="" alt=""> 
     </a> 
    </div> 
    <div class="img-single column column-block"> 
     <a data-open="galleryModal"> 
     <img src="https://placeimg.com/440/780/animals" class="" alt=""> 
     </a> 
    </div> 
</div> 

SCSS

.img-single { 
    width: 300px; 
    height: 300px; 
    position: relative; 
    overflow: hidden; 
    img { 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     transform: translate(-50%, -50%); 
     min-width: 300px; 
     min-height: 300px; 
    } 
} 

JSFiddle demo