保持畫廊中的圖像比例html/css

我正在爲電影攝影師製作一個投資組合。他們也做了很多攝影，他們希望他們的圖像縮略圖保持不變，這樣圖像在縮小時就不會失去任何美感。保持畫廊中的圖像比例html/css

我正在尋找的是一個方法，使圖像保持原有比例，但比例並把它們裝配到div容器。（有設定的寬度和高度）

我已經試過基本上所有的東西。包括按比例縮放圖像的傳統方式：

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

這對於縮放非常適用，但它仍然會切斷圖像。（至極就是我試圖避免）

我一直在尋找像一個甲基，但tweeker無法找到任何解決了這個問題。這可能是因爲我正在尋找一些我不想要的方式來解決問題。

反正.. TL;博士：

我想縮略圖以保持其原始圖像的比例，但約3倍，小，適合div容器。（固定的寬度和高度）任何人有任何想法如何完成這一點？

這是我試圖實現的example。

來源

2013-04-12 Jefferson

http://stackoverflow.com/q/3029422/114029和http://unstoppablerobotninja.com/entry/fluid-images –

不知道..我知道如何製作流暢的圖像。我正在嘗試製作一個圖庫，保留它們的原始比例......只有更小。並使圖像集合適合div。 – Jefferson

你想在容器中適合寬度和高度......所有的圖像都是相同的比例？如果這樣使用：'img {max-width：100％; }' –

你試圖設置寬度有些％，按你的股利和圖像ratio..just調用JavaScript來檢查圖像，然後設置相應的CSS屬性，你的DIV的寬度「寬度」的形象，要求使用腳本百分比和高度設置爲auto .....反之，如果高度是手動更但如果設置自動不起作用嘗試設置比例例如

function set() 
{ 
var img=document.getElementById('anyimg'); 
var iwidth=img.width; 
var iheight=img.height; 
var wr,hr; 
var mydiv = document.getElementById('anydiv'); 
divH=mydiv.height; 
divW=mydiv.width; 
wr=iwidth/divW; 
hr=iheight/divH; 
if(hr>wr) 
{ 
image.height=divH; 
image.width=iwidth/hr; 
else 
{ 
image.height=divH; 
image.width=iwidth/hr; 
}}

來源

2013-04-14 09:23:47 Dapu

保持畫廊中的圖像比例html/css

回答

相關問題