tamaño - como cambiar la posicion de una imagen en html

¿Hay una manera de especificar un alto o ancho máximo para una imagen?

Question

Me gustaría tener una imagen que tenga una altura de 725 o una anchura de 500 y mantenga su relación de aspecto. Cuando tengo imágenes con una altura de más de 725 y más delgadas de 500, se estiran para ajustarse a un ancho de 500.

¿Cuál es la mejor manera de hacer esto?

A continuación es lo que estoy haciendo ahora:

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

Actualización: Lo cambié a esto pero tengo el mismo problema. Si especifico solo la altura, mantendrá la relación de aspecto pero excede el ancho máximo de 500px que quiero.

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

Answer 1

Podrías usar algo de CSS y con la idea de kbrimington debería hacer el truco.

El CSS podría ser así.

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

Lo tengo desde aquí: otro post

Answer 2

Puedes probar este

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

Esto mantiene la relación de aspecto de la imagen y evita que las dos dimensiones excedan los 500 px

Puedes consultar esta post

Answer 3

Si solo especifica la altura o el ancho, pero no ambos, la mayoría de los navegadores respetarán la relación de aspecto.

Debido a que está trabajando con un control de servidor ASP.NET, puede considerar ejecutar la lógica en el lado del servidor antes de la representación para decidir qué atributo (alto o ancho) desea especificar; es decir, si desea una altura fija en una condición o un ancho fijo en otra.

Answer 4

establecer un estilo para la imagen

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

Answer 5

editado para agregar soporte para ie6:

Tratar

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

Esto debería establecer la altura a 725px pero evitar que el ancho exceda los 500px. La expresión de ancho funciona alrededor de ie6 y es ignorada por otros navegadores.