2010-09-09 7 views
22

Me gustaría tener una imagen para tener una altura de 725 o un ancho de 500 y mantener su relación de aspecto. Cuando tengo imágenes con una altura de más de 725 y menos de 500, se estiran para ajustarse a un ancho de 500.¿Hay alguna forma de especificar una altura o ancho máximo para una imagen?

¿Cuál es la mejor manera de hacerlo?

continuación es lo que estoy haciendo ahora:

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

Actualización: lo cambió a esto, pero tienen 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" /> 
+0

¿Qué altura/ancho en el div circundante? Intente hacerlo con la etiqueta just y también. –

+0

No hay alto/ancho especificado en el div circundante. Traté de usar img también y tengo el mismo problema. –

Respuesta

20

editied para añadir soporte para IE6:

Trate

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

Esto se debe ajustar la altura de 725px, pero evitar que el ancho de 500px superior. La expresión de ancho funciona alrededor de ie6 y otros navegadores la ignoran.

+0

¿Alguien podría aprobar si esto funciona? PD No funcionará en IE6 con seguridad, porque IE6 falla en max-height, max width.Nunca lo usé realmente, así que olvídalo si IE7 y 8 tampoco tienen problemas. – jolt

+0

Código actualizado para usar una expresión (propiedad de Microsoft) para agregar soporte ie6. –

5

Si únicamente se especifica ya sea la altura o el ancho, pero no ambas, la mayoría de los navegadores le honrar la relación de aspecto.

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

+0

De hecho, miré mi código nuevamente y no había ninguna razón para usar el control de imagen asp.net para esto, en realidad me estaba haciendo más trabajo. ¿Debería ver el uso de Javascript para decidir si quiero que mi imagen use una altura o un ancho? –

+0

@Abe - "Debería" es una palabra fuerte. Ciertamente podrías. Tal vez algunos maestros de JQuery podrían responder con una solución. – kbrimington

2

Puede usar CSS y con la idea de kbrimington debería funcionar.

El CSS podría ser así.

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

lo tengo desde aquí: another post

9

Puede 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 cualquiera de las dos dimensiones exceden 500px

Puede verificar esto post

0

establecer un estilo para la imagen

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

asp: El control de imagen no tiene propiedad de 'estilo'. Esto dará como resultado un error. – Rahatur

+0

no funciona a la perfección. – anand360

+0

¿deberían los estilos en línea ser camelCase? – Anup

Cuestiones relacionadas