2010-09-09 8 views
22

Я хотел бы иметь изображение размером 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" /> 
+0

Какая высота/ширина на окружающем div? Попробуйте сделать это с помощью только тега и . –

+0

В окружающем div нет высоты/ширины. Я также попытался использовать img и имею ту же проблему. –

ответ

20

editied добавить поддержку IE6:

Попробуйте

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

Это должно установить высоту 725px, но предотвратить ширину от превышения 500px. Выражение ширины работает вокруг ie6 и игнорируется другими браузерами.

+0

Может ли кто-нибудь одобрить, если это работает? Постскриптум Он не будет работать в IE6 точно, потому что IE6 выходит из строя на максимальной высоте, максимальной ширине.Никогда не использовал его на самом деле, поэтому забыл, что IE7 и 8 тоже не сталкиваются с проблемами. – jolt

+0

Обновленный код для использования выражения (запатентованный microsoft) для добавления поддержки ie6. –

5

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

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

+0

Я действительно посмотрел на свой код еще раз, и для меня не было оснований использовать элемент управления ими для asp.net, на самом деле он делал больше работы для меня. Должен ли я смотреть на использование Javascript, чтобы решить, хочу ли я, чтобы мое изображение использовало высоту или ширину? –

+0

@Abe - «Должно» - сильное слово. Вы, конечно, могли бы. Возможно, некоторые мастера JQuery могут прослушивать решение. – kbrimington

2

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

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

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

Я получил его отсюда: another post

9

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

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

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

Вы можете это проверить post

0

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

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

asp: Управление изображениями не имеет свойства стиля. Это приведет к ошибке. – Rahatur

+0

нет, он отлично работает. – anand360

+0

Должны ли встроенные стили быть camelCase? – Anup