通過使用寬度和高度屬性來縮放圖像以適合指定的矩形

假設我有一個矩形區域（例如由div定義），具有某些指定的寬度和高度。而且我的圖像具有不可預知的尺寸和高寬比。通過使用寬度和高度屬性來縮放圖像以適合指定的矩形

如果我想讓該圖像適合給定的矩形區域並保持原始高寬比，我該怎麼做？

如果我事先知道哪一方會受到限制，我只能指定一個維度。例如，如果矩形的大小爲200x100像素，圖像的大小爲400x300像素，我可以使用<img src="link/to/my/image.jpg" height="100px">代碼，圖像將保持其寬高比並將腳放到我的矩形中。但是，如果矩形將例如爲100x100px，那麼圖像將會從邊上離開矩形。

因此，我唯一能做的就是隱藏圖像大小並做一些簡單的計算來定義圖像的寬度和高度，以便：保持原始比率並適合所有可能組合的指定矩形。

但它看起來有點複雜，需要在服務器端使用圖形庫。可能我想念一些HTML功能？

來源

2014-05-22 Roman Matveev

您是否在尋找[這裏]（https：//開頭github上。com/karacas/imgLiquid） – Exception

你可以通過把這個CSS代碼來做到這一點。

min-width: 100%; 
height: auto;

或逆

min-height: 100%; width: auto;

例

HTML

<div class='bounding-box'> 
</div>

CSS

.bounding-box { 
    background-image: url(...); 
    background-repeat: no-repeat; 
    background-size: contain; 
}

OR -------------------------------

.bounding-box { 
    background-image: url(...); 
    background-size: contain; 
    position: absolute; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 100%; 
    width: 100%; 
}

fiddle

來源

2014-05-22 17:21:16 Shashank

我試過第一個。在我的例子中'min-width：100％; **最大寬度：100％; **身高：自動;'所以我認爲這是一些情況下（比矩形例如圖像小）我會得到錯誤的結果... –

那麼這一切，你可以做和它是正確的答案，如果順便說一句，你想要一些差距，如使圖像小於你可以根據你的需要使用填充XX像素，它會給你的盒子的所有邊界有一定的差距，它會使你的形象適合。 – Shashank

簡單，

<div id="rectangle" style="width:auto; height:auto;"> 
    <img src="link/to/my/image.jpg" width="100px" height="100px"> 
</div>

或者

<style> 
#rectangle {width:auto; height:auto;} 
</style> 

<div id="rectangle"> 
    <img src="link/to/my/image.jpg" width="100px" height="100px"> 
</div>

來源

2014-05-22 18:40:57 Jonco98

據我瞭解，如果image.jpg的尺寸爲200×100像素，它將顯示爲正確拉伸。對？我想保持原始的寬高比。 –

試試這個... – Jonco98

試過了。我得到了我所期望的：具有錯誤寬高比的小方形（比原始方框小）。 –

除非我誤解了你想要做的事情，如果矩形是固定的寬度和高度，只需使其中的圖像元素的最大寬度和最大高度爲100％。

事情是這樣的：http://jsfiddle.net/PKG4d/

CSS：

.container { 
    width: 600px; 
    height: 600px; 
    overflow: hidden; 
    border: 1px blue dotted; 
} 
.container > img { 
    max-height: 100%; 
    max-width: 100%; 
}

HTML：

<div class="container"><img src="http://img-fotki.yandex.ru/get/9088/855366.8a/0_a3175_3d12a514_orig.png"></div>

來源

2014-05-22 20:50:44

如果圖像比容器小，我會變小。 –

不，如果圖像小於容器，它將以正常尺寸顯示，不縮放。只有當它大於容器的高度或寬度時纔會縮放。 –

通過使用寬度和高度屬性來縮放圖像以適合指定的矩形

回答

相關問題