css 有没有一种方法可以指定图像的最大高度或宽度？

yh2wf1be 于 2023-05-23 发布在其他

关注(0)|答案(5)|浏览(125)

我想有一个图像要么有一个高度为725或宽度为500，并保持它的纵横比。当我有一个高度超过725，厚度小于500的图像时，它们会被拉伸以适应500的宽度。
最好的办法是什么？
下面是我现在正在做的事情：

<asp:Image Height="725" width="500" ID="img_DocPreview" />

**更新：**改为这个，但有同样的问题。如果我只指定高度，它将保持宽高比，但它超过了我想要的最大宽度500px。

<img style="height:725px;width:500px;" id="img_DocPreview" src="Images/empty.jpg" />

5条答案

你可以试试这个

img{
    max-height:500px;
    max-width:500px;
    height:auto;
    width:auto;
}

这保持了图像的宽高比，并防止两个维度超过500px

编辑添加对ie6的支持：

试试看

<img style="height:725px;max-width:500px;width: expression(this.width > 500 ? 500: true);" id="img_DocPreview" src="Images/empty.jpg" />

这应该将高度设置为725px，但防止宽度超过500px。width表达式适用于ie6，其他浏览器会忽略它。

如果你只指定了高度或宽度，而不是同时指定，大多数浏览器都荣誉宽高比。
由于您使用的是ASP.NET服务器控件，因此可以考虑在呈现之前在服务器端执行逻辑，以决定要指定哪个（高度或宽度）属性;也就是说，如果您希望在一个条件下具有固定的高度，或者在另一个条件下具有固定的宽度。

为图像设置样式

<asp:Image ID="Image1" runat="server" style="max-height:1000px;max-width:900px;height:auto;width:auto;" />

你可以使用一些CSS和kbrimington的想法，它应该做的伎俩。
CSS可以是这样的。

img {
  width:  75px;
  height: auto;
}

我从这里得到它：another post