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

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

- Abe Miessler

---

周围的div应该设置多大的高度/宽度？也可以尝试只使用<img>标签来实现。 - James Black

周围的 div 没有指定高度/宽度。我也尝试使用 img，但是遇到了同样的问题。 - Abe Miessler

Answer 1

你可以试试这个

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

这将保持图像的纵横比，并防止两个维度超过500px

- Daniel Nyamasyo

Answer 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的问题，并被其他浏览器忽略。

- Nico Burns

---

有人能否审核这个是否可行？顺便说一下，它肯定在IE6上不起作用，因为IE6在max-height、max width上失败了。实际上从来没有使用过它，所以忘记了IE7和8是否也会遇到问题。 - tomsseisums

更新了代码，使用了一个表达式（微软专有）来添加IE6支持。 - Nico Burns

Answer 3

如果你只指定高度或者宽度中的一个，而不是两者都指定，大多数浏览器会遵守等比例缩放。

由于您正在使用ASP.NET服务器控件，因此在呈现之前可以考虑在服务器端执行逻辑，以决定要指定哪个（高度或宽度）属性；也就是说，如果您想在某些条件下使用固定高度或在其他条件下使用固定宽度。

- kbrimington

---

我重新查看了我的代码，其实我没有必要使用asp.net图像控件来完成这个任务，它只会让我的工作更加繁琐。我是否应该考虑使用Javascript来决定我想要的图像是使用高度还是宽度？ - Abe Miessler

@Abe - "Should" 是一个强烈的词。你当然可以这样做。也许一些 JQuery 大师可以提供解决方案。 - kbrimington

Answer 4

为图像设置样式

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

- anandd360

---

asp:Image控件没有'style'属性。这将导致错误。 - Rahatur

内联样式应该使用驼峰命名法吗？ - Anup

@Anup 不清楚你的确切意思。无论如何，该代码将适用于维护图像显示大小。 - anandd360

style="max-height:1000px; was just asking is there some convention to write dis in camelCase maxHeight:100px"样式="最大高度：1000像素；我只是在问是否有一些惯例用驼峰命名法来写这个，最大高度：100像素" - Anup

@Anup 抱歉，我不确定，你可以尝试并检查一下。 - anandd360

Answer 5

你可以使用一些CSS，结合kbrimington的想法，就可以解决问题了。

CSS可能是这样的。

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

我从这里得到的：另一篇文章

- Icarin