イメージの中心をサムネイルに表示する方法

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;を追加しようとし、最大幅と最大高さの値で試しましたが、何もしませんでした。どのようにそれを行うことができますか？

Answer 1

background-imageをdivに設定して、より小さなコンテナに画像をセンタリングすることができます。

<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も。

希望しました。

PS：ブリードアウトを防ぐためにも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