有没有办法为图像指定最大高度或宽度？

Question

我希望图像的高度为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" />

Answer 1

编辑以添加对ie6的支持：

尝试

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

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

Answer 2

你可以尝试这个

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

这样可以保持图像的纵横比，并防止两个尺寸超过500px

您可以查看post

Answer 3

如果您只指定高度或宽度，而不指定两者，则大多数浏览器都会遵循宽高比。

因为您正在使用ASP.NET服务器控件，所以您可以考虑在呈现之前在服务器端执行逻辑以决定要指定的属性（高度或宽度）;也就是说，如果你想在一个条件下固定高度或在另一个条件下固定宽度。

Answer 4

你可以使用一些CSS和kbrimington的想法它应该做的。

CSS可能是这样的。

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

我是从这里得到的：another post

Answer 5

为图像设置样式

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