無法降低html中圖片的高度

我是web開發的新手。我想減小圖像的大小，但圖像的高度並未減小。我在這裏做錯了什麼？無法降低html中圖片的高度

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My test page</title> 
    </head> 
    <body> 
    <img style="width: 100%; height: 30%" src="images/test.jpg" alt="test image"> 
    </body> 
</html>

來源

2016-07-16 pythonic

您還可以使用最小高度 –

是否要保持圖像的高寬比？或者即使圖像可能失真，您是否還想降低其高度？ – Dryr

理想情況下，我希望圖像適合瀏覽器窗口的正文。我怎樣才能做到這一點？ – pythonic

使用height，而不是max-height。 max-height僅指定元素可以採用的最大高度，而不指實際的高度。

此外，由於您使用的百分比來定義height，請確保父元素（在您的情況下，body）給出height。

來源

2016-07-16 12:44:18

它也不適用於高度。你是什麼意思是元素是高度。你能舉出例子代碼嗎？ – pythonic

將身體標記的高度設置爲某個像素值，例如300px，然後您就會明白。 –

我明白了。它現在確實有效。我是否也可以自動使圖像適合瀏覽器窗口？ – pythonic

img-tag沒有屬性最大高度和最大寬度！你需要width和height

你可以試試這個在this page

來源

2016-07-16 12:47:22 franc

使用style="height:30%;width:100%"或定義高度和寬度的外父。

來源

2016-07-16 12:48:16

您提供的百分比最大寬度和最大高度，所以它需要一個容器在其方面，將設置高度

<div style="height: 100px" > 
<img src="http://i1.wp.com/static.web-backgrounds.net/uploads/2012/08/City_Landscape_Background.jpg" style="max-width: 100%; max-height: 50%" /> 
</div>

來源

2016-07-16 12:49:49 abhirathore2006

附上圖像劃分成<div>標籤，然後使用高度/寬度或最大/最小寬度/高度以使用百分比更改高度。

來源

2016-07-16 12:51:07 Imdad

如果您定義寬度，讓高度自動或其他方式來尊重比例。

這裏就是引導確實爲響應圖像

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

然後，您可以約束容器。

例如：https://jsfiddle.net/Ljn7qm22/1/

需要注意的是性能，你不應該將圖像調整（讓瀏覽器加載一個大的圖像，並只顯示一個小東西給用戶）。

來源

2016-07-16 12:59:13 chikincrow

父元素高度也可以百分比給出。但是，應該給它。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>My test page</title> 
<style> 
html{ 
height:100%; 
} 
body{ 
height:100%; 
} 
</style> 
</head> 
<body> 
<img style="width: 100%; height: 30%" src="images/test.jpg" alt="test image"> 
</body> 
</html>

來源

2016-07-16 13:01:48

無法降低html中圖片的高度

回答

相關問題