Подтвердить что ты не робот

Есть ли способ указать максимальную высоту или ширину изображения?

Я бы хотел, чтобы изображение имело высоту 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" />
4b9b3361

Ответ 1

, чтобы добавить поддержку для 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 и игнорируется другими браузерами.

Ответ 2

Вы можете попробовать этот

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

Это сохраняет пропорции изображения и предотвращает либо два измерения, превышающие 500 пикселей

Вы можете проверить это сообщение

Ответ 3

Если вы указываете только высоту или, но не оба, большинство браузеров будут соблюдать пропорции.

Поскольку вы работаете с серверным элементом ASP.NET, вы можете рассмотреть возможность выполнения логики на стороне сервера перед рендерингом, чтобы определить, какой (высоту или ширину) атрибут вы хотите указать; то есть, если вы хотите фиксированную высоту при одном условии или фиксированную ширину под другим.

Ответ 4

Вы можете использовать некоторый CSS и с идеей kbrimington, он должен сделать трюк.

CSS может быть таким.

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

Я получил это отсюда: другое сообщение

Ответ 5

установить стиль для изображения

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