div中的中心和剪輯圖像

我正在建立縮略圖庫。對於每個縮略圖，我創建一個剪輯器div並將該圖像放置在該div內。縮略圖的大小是不同的圖像不同的地方爲限幅器的div是150x150pxdiv中的中心和剪輯圖像

<div class='clipper-div'> 
    <img class='image1' src='img/img2.jpg'/> 
</div>

我想地方的形象，使其佔據完全的div和圖像的其餘部分被截斷，使得它正好居中。

爲了做到這一點，我看到了什麼是圖像的最小尺寸（高度/寬度），使其100％。然後是其他維度，現在它大於div的150像素。我正在計算差異，除以2並將頂部/左側屬性設置爲該值的負值，以便圖像看起來居中，然後將溢出：隱藏到裁剪器div，以便多餘部分不可見。

我想知道是否有更好的方法做到這一點，而不是我計算這些值，我可以只設置CSS屬性，以便所有圖像將在該div中居中（垂直/水平）和其餘部分被剪切。

如果我的描述是混亂的，這裏有一個例子：比方說，縮略圖的大小是300x100px。所以身高是最小的屬性，所以我將它設置爲100％。所以高度變成150，寬度變成400px，所以現在我計算偏移量。在這種情況下（400-150）/ 2 = 125px。現在我設置圖像左-125px

.image1{ 
    position:absolute; 
    left:-125px; 
    height:100%; 
}

來源

2013-01-24 sublime

試試這個：

.Image1 { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-01-24 03:17:00 Djave

嘿感謝的解決方案，我還有一個問題，如果我現在想有其他背景圖片的東西，東西是佔位符直到你真的加載你的圖像。我怎麼做？我是否創建另一個div？ – sublime

只是把它放在.clipper-div上，然後有多個.clipper-div – Djave

div中的中心和剪輯圖像

回答

相關問題