0

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

13

Я хочу, чтобы изображение имело высоту 725 пикселей или ширину 500 пикселей и сохраняло свои пропорции. Когда у меня есть изображения с высотой более 725 пикселей и шириной менее 500 пикселей, они растягиваются, чтобы соответствовать ширине 500 пикселей.

Какой лучший способ этого достичь?

Вот что я делаю сейчас:

<asp:Image Height="725" width="500" ID="img_DocPreview" />

Обновление: Изменил код на следующий, но проблема осталась. Если я указываю только высоту, пропорции сохраняются, но это превышает максимальную ширину 500 пикселей, которую я хочу.

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

3 ответ(ов)

0

Вы можете попробовать следующее решение:

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

Этот код сохраняет соотношение сторон изображения и не позволяет ни одно из двух измерений превышать 500 пикселей.

0

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

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

0

Чтобы задать стиль для изображения в ASP.NET, вы можете использовать атрибут style вместе с элементом <asp:Image>, как показано в вашем примере. В вашем коде вы уже правильно указали стили для ограничения максимальной высоты и ширины изображения. Вот как это выглядит:

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

Этот код устанавливает максимальную высоту изображения в 1000 пикселей и максимальную ширину в 900 пикселей, при этом оставляя размеры изображения адаптивными с помощью height:auto; и width:auto;. Это означает, что изображение будет масштабироваться, сохраняя пропорции, в зависимости от доступного пространства.

Если вам нужно применить стили через CSS, вы можете использовать класс или идентификатор:

<style>
    .custom-image {
        max-height: 1000px;
        max-width: 900px;
        height: auto;
        width: auto;
    }
</style>

<asp:Image ID="Image1" runat="server" CssClass="custom-image" />

Таким образом, использование CSS-классов может помочь вам лучше организовать стили и упростить дальнейшее редактирование.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь