如何在縮略圖中顯示圖像的中心

這可能很簡單，但我似乎無法弄清楚。我正在處理圖像庫，圖像有時處於縱向模式，有時處於橫向模式。爲了使畫廊看上去統一，我需要縮略圖的尺寸相同，只需點擊一下，即可顯示完整圖像。我正在使用Zurb基金會和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 x 300像素。我只需要顯示圖像的縮略圖並顯示圖像的中心，而不是扭曲。我也嘗試添加vertical-align: middle;並使用最大寬度和最大高度值，但它沒有做任何事情。如何做呢？

來源

2017-03-15 Newbie

您可以在div上使用background-image將圖像置於較小的容器中。

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

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

來源

2017-03-15 13:01:44 nashcheez

但是我有很多的圖像有那麼我就需要創建多個類和使用背景圖片每班，不是？沒有辦法做到這一點，當我的圖像在我的HTML，而不是一個CSS？ – Newbie

你可以做的是對所有人應用相同的類，並使用HTML中的'style'屬性在元素中應用'background-image' url。 – nashcheez

您可能需要新的object-fit CSS屬性的優勢，使圖像顯示爲你想要的。

這是給你一些示例代碼，顯示使用object-fit放在圖像之間的差異，以及默認的圖像：

.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">

您可將圖像以不同的img-single與內定位object-position如果你想。

希望它有幫助。

PS：我也用overflow屬性來阻止圖像流血。謝謝。

來源

2017-03-15 13:31:04

謝謝！我會查看對象位置並回報。 – Newbie

當然，請慢慢來。 –

如果你刪除基礎的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

來源

2017-03-15 17:50:30 tymothytym

如何在縮略圖中顯示圖像的中心

回答

相關問題