如何爲$ IMG的最大高度，但保持的比例

如何設置最大高度或寬度：

$ img_attributes = 'HEIGHT = 100寬度= 100'。的 'ALT = 「'。$產物[ 'PRODUCT_NAME'] '」';

2009-12-22 Chris

你說的是PHP還是HTML？在HTML中，您可以只設置高度而不提寬度。如果你在PHP中，你需要一個像AlbertEins – MindStalker 2009-12-22 18:37:17

那麼，有max-height和max-width CSS屬性，不是嗎？ THey可以在除IE 6和IE 7以外的所有主流瀏覽器中工作。

2009-12-22 18:34:12

函數嗨Pekka，我還沒有測試過，但可以工作嗎？ $ img_attributes ='max-height = 100 max-width = 100'。的 'ALT = 「'。$產物[ 'PRODUCT_NAME'] '」'; – Chris 2009-12-22 18:42:18

不，你需要添加'style'：'style ='max-height：100px; max-width：100px'' – 2009-12-22 19:23:42

爲了達到此目的，您不得在img標籤本身上設置寬度或高度。 – Staysee 2013-08-28 17:52:52

您應該檢查一般信息的這個答案：Proportional image resize。

如果你想在不使用服務器端的情況下調整圖像大小，我建議你使用Javascript。這是tutorial。

總之你的JavaScript函數將返回新高度和寬度：

function scaleSize(maxW, maxH, currW, currH){ 
    var ratio = currH/currW; 
    if(currW >= maxW){ 
     currW = maxW; 
     currH = currW * ratio; 
    } else >if(currH >= maxH){ 
     currH = maxH; 
     currW = currH/ratio; 
    } 
    return [currW, currH]; 
}

有了這個功能，你可以設置圖像的寬度和高度：

img.width = newW; 
img.height = newH;

但是，最好的方法是在服務器端進行。這將防止在客戶端產生奇怪的效果。

來源

2009-12-22 18:36:20

以下樣式將使所有使用「MaxSized」css類的圖像的最大高度爲100px，最大寬度爲100px。如果圖像較小，則不會拉伸。

<style> 
IMG.MaxSized 
{ 
max-width: 100px; 
max-height: 100px; 
} 
</style>

正如佩卡提到的，你必須有秩序XHTML 1.0 Strict DTD的這個IE中的現代版本的工作，但我個人認爲這是適當的做法。

來源

2009-12-22 18:39:40

問題是如果圖像的寬度和高度都較大，但不是方形。 – 2009-12-22 18:48:51

你會得到一個循環嗎？ – Chris 2009-12-22 19:08:50

這沒關係。如果要限制高度或寬度，可以使用最大高度和最大寬度樣式。如果圖像垂直較大，則將限制爲指定的最大高度並適當縮放。寬度也一樣。規模不會改變。 – 2009-12-22 19:09:22

正如最常見的答案所述，您可以使用max-height或max-width CSS屬性。但是這些屬性的行爲並不一樣。要保持圖像的比例，必須將高度和寬度設置爲100％，然後設置max-width。如果您設置max-height，則比例不會保留。

所以：

<img src="image.png" style="height: 100%; width: 100%; max-width: 400px" alt=" "/>

確實保留的比例，但

<img src="image.png" style="height: 100%; width: 100%; max-height: 400px" alt=" "/>

沒有。這是因爲（據我所知），HTML將首先設置寬度，然後設置高度。所以在第二種情況下，寬度設置爲100％，但高度有限，這可能會導致圖像扭曲。在第一種情況下，寬度被設置爲具有最大限制，並且相應地調整高度，從而保持圖像尺寸。

來源

2017-04-10 08:13:36

如何爲$ IMG的最大高度，但保持的比例

回答

相關問題