Я бы хотел, чтобы изображение имело высоту 725 или ширину 500 и поддерживало ее соотношение сторон. Когда у меня есть изображения с высотой более 725 и тоньше 500, они растягиваются до 500.
Каков наилучший способ сделать это?
Ниже приводится то, что я делаю сейчас:
<asp:Image Height="725" width="500" ID="img_DocPreview" />
Update: Изменил это, но имел ту же проблему. Если я укажу только высоту, она будет поддерживать соотношение сторон, но она превышает максимальную ширину 500 пикселей, которую я хочу.
<img style="height:725px;width:500px;" id="img_DocPreview" src="Images/empty.jpg" />
, чтобы добавить поддержку для ie6:
Try
<img style="height:725px;max-width:500px;width: expression(this.width > 500 ? 500: true);" id="img_DocPreview" src="Images/empty.jpg" />
Это должно установить высоту до 725 пикселей, но не превышать ширину ширины 500 пикселей. Выражение ширины работает вокруг ie6 и игнорируется другими браузерами.
Вы можете попробовать этот
img{
max-height:500px;
max-width:500px;
height:auto;
width:auto;
}
Это сохраняет пропорции изображения и предотвращает либо два измерения, превышающие 500 пикселей
Вы можете проверить это сообщение
Если вы указываете только высоту или, но не оба, большинство браузеров будут соблюдать пропорции.
Поскольку вы работаете с серверным элементом ASP.NET, вы можете рассмотреть возможность выполнения логики на стороне сервера перед рендерингом, чтобы определить, какой (высоту или ширину) атрибут вы хотите указать; то есть, если вы хотите фиксированную высоту при одном условии или фиксированную ширину под другим.
Вы можете использовать некоторый CSS и с идеей kbrimington, он должен сделать трюк.
CSS может быть таким.
img {
width: 75px;
height: auto;
}
Я получил это отсюда: другое сообщение
установить стиль для изображения
<asp:Image ID="Image1" runat="server" style="max-height:1000px;max-width:900px;height:auto;width:auto;" />