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

Posted 2023-03-06

【中文标题】有没有办法为图像指定最大高度或宽度？

【英文标题】：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"  ID="img_DocPreview" />

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

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

【问题讨论】：

周围 div 的高度/宽度是多少？也可以尝试使用 just 和 标签。

周围的 div 上没有指定高度/宽度。我也尝试使用 img 并遇到同样的问题。

【参考方案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 附近有效，被其他浏览器忽略。

【讨论】：

有人可以批准这是否可行吗？附言它肯定不会在 IE6 中工作，因为 IE6 在最大高度、最大宽度上失败。没有实际使用过，所以忘记了IE7和8是否也遇到问题。

更新代码以使用表达式（微软专有）添加 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;" />

【讨论】：

asp：图像控件没有“样式”属性。这将导致错误。

内联样式应该是驼峰式吗？

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

style="max-height:1000px; 只是问是否有一些约定可以在 camelCase maxHeight:100px 中写入 dis

@Anup 抱歉，不确定，你试试看。