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

【问题标题】：Is there a way to specify a max height or width for an image?有没有办法为图像指定最大高度或宽度？
【发布时间】：2011-04-10 08:28:56
【问题描述】：

我希望图像的高度为 725 或宽度为 500，并保持其纵横比。当我的图像高度超过 725 且小于 500 时，它们会被拉伸以适应 500 的宽度。

最好的方法是什么？

下面是我现在正在做的事情：

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

更新： 将其更改为此，但有同样的问题。如果我只指定高度，它将保持纵横比，但它超过了我想要的 500 像素的最大宽度。

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

【问题讨论】：

标签： html css

【解决方案1】：

如果您只指定高度或宽度，但不能同时指定两者，大多数浏览器都会采用纵横比。

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

【讨论】：

我实际上再次查看了我的代码，我没有理由为此使用 asp.net 图像控件，它实际上为我做了更多的工作。我应该考虑使用 Javascript 来决定我希望我的图像使用高度还是宽度？
@Abe - “应该”是一个强词。你当然可以。也许一些 JQuery 大师可以提出解决方案。

【解决方案2】：

已编辑以添加对 ie6 的支持：

试试

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

这应该将高度设置为 725 像素，但防止宽度超过 500 像素。宽度表达式在 ie6 附近有效，被其他浏览器忽略。

【讨论】：

【解决方案3】：

您可以使用一些 CSS，并通过 kbrimington 的想法来解决问题。

CSS 可能是这样的。

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

我从这里得到它：another post

【讨论】：

【解决方案4】：

你可以试试这个

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

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

你可以查看这个post

【讨论】：

【解决方案5】：

为图片设置样式

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

【讨论】：