如何調整大小/裁剪圖像以適應背景大小：封面的作用？

我正在使用引導程序構建響應站點3 &我需要一個照片庫。客戶想自己更新圖庫..如何調整大小/裁剪圖像以適應背景大小：封面的作用？

我的問題是他們上傳的圖像可以是任何大小的&任何比例..我如何使圖像適合一定大小的div？

要求（必須的工作方式與後臺大小：蓋）：

-images必須保持其原有的比例（可裁剪以適合DIV）

-images必須伸展/收縮，以適應在FULL DIV（無空格）

- 影像必須垂直水平在div

我知道我可以做這樣的事情，但我需要它的工作更像中心&「背景大小：蓋」：

.myImages { 
height:300px; 
width:300px; 
overflow:hidden; 
}

http://jsfiddle.net/w4xTN/1/

例：

你可以說我已經使用下面的鏈接查看「背景圖像：蓋」爲「功能性」的照片。我需要爲正常圖像做類似的事情（除非有人知道圖像庫會支持圖像的「背景圖像：覆蓋」？）：

http://new.amberlee.com.au/for-sale/browse-for-sales

注：JQuery的/ Javasript是OK使用&上上傳調整他們是不是一種選擇;）

來源

2014-02-10 MWD

你已經得到了.myImages內的標籤，所以你需要爲你的標籤，因此添加屬性：

.myImages > img { 
    height: 100%; 
    width: 100%; 
}

如果要將img居中，只需將height或width屬性更改爲「auto」;

您也可以將img標記垂直居中，從而在播放垂直邊距的情況下裁剪圖像：

margin-top: -33%;

http://jsfiddle.net/denistsoi/rLmxL/1/

來源

2014-02-10 03:25:51

沒有，你不能讓它很喜歡background-size:cover但..

這種做法真的是太接近：它使用JavaScript來確定圖像長或高，並按照風格應用。

$('.myImages img').load(function() { 
    var height = $(this).height(); 
    var width = $(this).width(); 
    console.log('widthandheight:', width, height); 
    if (width > height) { 
     $(this).addClass('wide-img'); 
    } 
    else { 
     $(this).addClass('tall-img'); 
    } 
});

CSS

.tall-img{ 
    margin-top:-50%; 
    width:100%; 
} 
.wide-img{ 
    margin-left:-50%; 
    height:100%; 
}

http://jsfiddle.net/b3PbT/

編輯：這是你的最後一個問題無恥轉貼）

來源

2014-02-10 03:26:46 roo2

如何調整大小/裁剪圖像以適應背景大小：封面的作用？

回答

相關問題