Question

我是网络开发的新手。我想减小图像的大小，但图像的高度并没有减少。我在这里做错了什么？

<!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>

Answer 1

使用height代替max-height。 max-height仅指定元素可以采用的最大高度，而不是实际高度。

此外，由于您使用百分比来定义height，因此请确保为父元素（在您的情况下为body）提供height。

Answer 2

img-tag没有属性max-height和max-width！您需要width和height

您可以在this page

上试试

Answer 3

你提供的是max-width和max-height的百分比，所以它需要一个容器，在这方面它会设置高度

<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>

Answer 4

使用style="height:30%;width:100%"或定义外部父级的高度和宽度。

Answer 5

父元素高度也可以百分比给出。但是，应该给出。

<!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>

Answer 6

将图像封装到<div>标签中，然后使用高度/宽度或最大/最小宽度/高度使用百分比来改变高度。

Answer 7

如果您定义宽度，请让高度自动或相反，以尊重比率。

以下是Bootstrap为响应式图像所做的工作

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

然后您可以约束容器。

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

请注意，为了提高性能，您不应调整图片大小（让浏览器加载大图片，只向用户显示一些内容）。

无法降低html中图像的高度

7 个答案: