Especificando ancho y alto como porcentajes sin sesgar proporciones fotográficas en HTML

Question

Me preguntaba si en los atributos de ancho y alto, ¿podría especificar el ancho y la altura como porcentajes?

Bueno, supongo que es obvio, porque cuando lo intento, cambia el tamaño, pero parece sesgar la calidad de mi imagen.

Aquí es un ejemplo de mi marcado con atributos fijos:

<img src="#" width="346" height="413"> 

Ahora, al intentar escalar esto abajo, decir a la mitad, a través de porcentajes:

<img src="#" width="50%" height="50%"> 

me sale algo completamente diferente de:

<img src="#" width="173" height="206.5"> 

Creo que estoy simplemente confundiendo mi porcentaje de marcado o s omething porque hay una diferencia notable entre mi segundo y tercer ejemplo visualmente.

ACTUALIZACIÓN: ¡Gracias a todos por todas las publicaciones útiles!

Realmente realmente como la sugerencia de jQuery hecha por Pat sólo porque con un solo fragmento como él sugiere, de hecho me puedo modificar el selector y hacer que la aplica a todos mis FancyBox afectados imágenes como tan:

$('img.FancyBox').each(function(){ 
    $(this).width($(this).width() * 0.25); 
}); 

¡Qué maravilloso es eso!

Se puede extraer el efecto directo aquí en mi sitio: http://www.marioplanet.com/product.htm

funciona bastante bien, teniendo en cuenta el hecho de que una vez que lo conecto a mi db SQL Server entonces yo sólo puedo solicitar que uno jQuery fragmento de código a todas las imágenes de la clase FancyBox en las páginas de mis productos.

Gracias chicos!

Answer 1

Esos anchos de porcentaje en su segundo ejemplo se están aplicando realmente al contenedor en el que se encuentra su <img>, y no el tamaño real de la imagen. Supongamos que tiene el siguiente marcado:

<div style="width: 1000px; height: 600px;"> 
    <img src="#" width="50%" height="50%"> 
</div> 

La imagen resultante tendrá 500 px de ancho y 300 px de alto.

jQuery Redimensionar

Si usted está tratando de reducir una imagen a un 50% de su anchura, puede hacerlo con un fragmento de jQuery:

$("img").each(function() { 
    var $img = $(this); 
    $img.width($img.width() * .5); 
}); 

Sólo asegúrese de tomar fuera de cualquier altura/ancho = 50% atributos primero.

Answer 2

Puede establecer una u otra (simplemente no ambas) y eso debería obtener el resultado que desea.

<img src="#" height="50%"> 

Answer 3

De W3Schools

La altura en porcentaje del elemento contenedor (como "20%").

¿De modo que creo que se refieren al elemento en el que se encuentra el div?

Answer 4

width = "50%" and height = "50%" establece los atributos de ancho y alto en la mitad del ancho y alto del elemento principal si no me equivoco. Además, establecer solo el ancho o alto debe establecer el ancho o alto en el porcentaje del elemento principal, si está usando porcentajes.

Answer 5

Dada la falta de información sobre el tamaño de la imagen original, la especificación de porcentajes para el ancho y alto daría lugar a resultados muy erráticos. Si intenta asegurarse de que una imagen encajará en una ubicación específica en su página, entonces necesitará usar algún código del lado del servidor para administrar ese cambio de escala.

Answer 6

Aquí está la diferencia:

Ajusta la imagen a la mitad de su tamaño original.

<img src="#" width="173" height="206.5"> 

Esto establece la imagen a la mitad de su área de presentación disponible.

<img src="#" width="50%" height="50%"> 

Por ejemplo, si se pone esto como el único elemento de la página, se trataría de tomar hasta el 50% del ancho de la página, por lo que es potencialmente más grande que su tamaño original - no la mitad de su tamaño original como está esperando.

Si se presenta en un tamaño mayor que el original, la imagen aparecerá muy pixelada.

Answer 7

En realidad, hay una forma de hacerlo con solo html. Sólo establece:

<img src="#" width height="50%">

Answer 8

Try uso de la propiedad escala en CSS3:

75% de la original:

-moz-transform:scale(0.75); 
-webkit-transform:scale(0.75); 
transform:scale(0.75); 

50% de la original:

-moz-transform:scale(0.5); 
-webkit-transform:scale(0.5); 
transform:scale(0.5);