合適的圖像（橫向和縱向）到方形縮略圖

我真的很努力地獲得橫向和縱向方向的圖像，以很好地適合畫廊的目的方形縮略圖。合適的圖像（橫向和縱向）到方形縮略圖

我試過各種CSS技巧，但認爲我需要也許使用Javascript。

任何人有任何想法我可以解決這個問題？

編輯 - HTML/CSS可以是任何東西，目前它只是打印出一類拇指廣場的圖像，即。

<img class="thumb_square" src="/images/uploads/pic.jpg"/> 
<img class="thumb_square" src="/images/uploads/pic2.jpg"/> 
<img class="thumb_square" src="/images/uploads/pic3.jpg"/>

來源

2012-09-02 Carl Bembridge

發表您的縮略圖的HTML和所有 – Ashirvad

我寫了一個Web照片庫，發現最簡單的方法是將縮略圖尺寸存儲在數據庫中，並根據這些尺寸設置的左邊距和上邊距。但是你沒有給出關於你的實現的很多信息，所以很難更具體。 –

如果你想要一個不匹配的形狀的圖像總是完全填入你的縮略圖，你有兩種選擇：1）你可以縮放/拉伸/擠壓它以適應或2）你可以按比例縮放它而不失真並剪切長邊不太適合。你要哪個？ – jfriend00

的一種可能的解決方案（測試）：顯示在div每個縮略圖。使用css background屬性顯示縮略圖，使用no-repeat顯示center。您必須指定包含div的width和height。將寬度和高度設置爲所有縮略圖的最大寬度/高度。即如果您的縮略圖是150px * 200px和200px * 150px，則將所有div設置爲200px * 200px。無論是縱向還是橫向「模式」，縮略圖都將集中在200px * 200px的框內。

例子：

<div style="width:200px; height:200px; 
    background: url('/images/uploads/pic.jpg') no-repeat center; 
    border:1px solid red;"> 
</div> 

<div style="width:200px; height:200px; 
    background: url('/images/uploads/pic2.jpg') no-repeat center; 
    border:1px solid red;"> 
</div> 

<div style="width:200px; height:200px; 
    background: url('/images/uploads/pic3.jpg') no-repeat center; 
    border:1px solid red;"> 
</div>

來源

2012-09-02 19:16:52 poplitea

謝謝，這是有效的，但由於圖像寬度大約爲600px，它只顯示了其中很小的一部分，有沒有辦法調整背景圖像的大小？ –

@CarlBembridge在使用圖像作爲縮略圖之前，您應該使用照片編輯器（Photoshop，ImageMagick或類似圖像）縮放圖像至縮略圖大小（可能爲100-300像素）。否則，它將需要時間加載您的網頁與所有這些大圖像... – poplitea

他們希望保持圖像高分辨率爲高DPI顯示像ipad/macbook專業版的目的。這是我沒有重新調整上傳的主要原因。所以我認爲這種方法將工作完美，如果我們調整上傳圖像的大小，我認爲使圖像可點擊我需要堅持一個透明的PNG或在那裏作爲一個鏈接到完整的形象，但這似乎是最好的方式讓他們獲得所有正確的比例。非常感謝:-) –

我認爲這正是你所需要的：無論圖像有多大，你會看到整個高度（如果橫向），或寬度（如果人像）;

jFiddle：http://jsfiddle.net/ECRc4/3/

HTML：

<div class="thumb" style="background-image: url('http://placehold.it/250x500')"></div> 
<br/> 
<div class="thumb" style="background-image: url('http://placehold.it/500x200')"></div> 
<br/> 
<div class="thumb" style="background-image: url('http://placehold.it/100x200')"></div>

CSS：

.thumb{ 
    display:inline-block; 
    width:100px; 
    height:100px; 
    background:center; 
    background-size:cover; 
}

來源

2014-03-04 10:04:04 Nahn

感謝您的回覆娜恩，這是一個很好的解決方案。由於背景尺寸：封面不受舊的瀏覽器支持（這是客戶端使用Internet Explorer的舊版本），就不太適合的這個問題。然而，使用前進是一個很棒的技術:-) –

合適的圖像（橫向和縱向）到方形縮略圖

回答

相關問題