¿Cómo cambiar el tamaño de una imagen en HTML/CSS puro manteniendo sus proporciones?

Question

¿Cómo puedo cambiar el tamaño de una imagen usando solo HTML/CSS (es decir, sin código de servidor) manteniendo sus proporciones y obteniendo un efecto de recorte? Detalles: ¿Desea cambiar su tamaño a un ancho específico, mantener las proporciones y si la altura es mayor que un valor específico para recortarla a la altura especificada?

En realidad, sé cómo hacerlo utilizando algún código de servidor pero no quiero hacer esto. Implicaría usar una referencia de archivo diferente y referir la imagen a algo como <img src="picture.php" />. Necesito procesar la imagen en la misma página que la muestra.

Lo que me "molesta" es que tengo que enviar el encabezado de la imagen para que no se muestre nada más en la página.

¿Hay alguna manera de hacer algo como eso? ¿Tal vez de puro HTML/CSS? : P

Hice una función que hace algo así (excepto esa cosa "crop") y devuelve width="" height="" y la uso así <img src="image.jpg" resize("image.jpg") />, pero no entiendo cómo puedo hacer ese recorte ... .

Gracias

Answer 1

bien, así que logré encontrar una manera de hacerlo desde html/css.La idea era deshacerse de ese "extraheight":

<div style="width:200px;height:200px;overflow:hidden;" > 
    <img src="image.jpg" width="200px" height="auto"> 
</div> 

principio, mi imagen se ajusta a la anchura deseada (manteniendo las proporciones) y luego dando una altura fija de contener div y setting overflow to hidden hace que la secuencia de comandos para mostrar sólo la porción deseada de la imagen.

Answer 2

usted no pueda brindar una imagen y HTML en el mismo archivo ya que los navegadores dependen de su cabecera content-type para interpretarlo.

El encabezado content-type de un documento HTML generalmente se establece en text/html mientras que el tipo de contenido de una imagen es image/* (sustituye * por el formato de imagen). Puede imprimir datos de imagen en un documento HTML, pero dado que el navegador tiene instrucciones de interpretarlo como text/html en lugar de una imagen, su contenido podría distorsionarse.

Deberá vincular su etiqueta <img> a un archivo PHP como el que describió. No estoy seguro de por qué eso constituye un problema; es la forma correcta de hacerlo. Por supuesto, puedes recortar la imagen manipulando sus dimensiones en HTML, pero no te recomiendo que lo hagas.

Answer 3

crear ayudante como:

<?php 
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />'; 
?> 

por lo que este ayudante comprobará si la imagen cambia de tamaño ya creado o crear uno nuevo. y en ambos casos devuelve la url adecuada a la nueva imagen.

Answer 4

Creo que ImageMagick admite los métodos "resize to fit" y "resize to fill", siendo este último lo que está buscando.

Antes de escribir su etiqueta de img en el búfer de salida, guarde la imagen en el nombre del archivo propuesto resultante y permita que "identifique" extraiga el ancho y el alto de esta imagen.

Si no desea trabajar con un archivo separado sino que desea que los datos de la imagen estén en línea, intente con el data-uri method compatible con los navegadores web más nuevos. Esto incluye el flujo de datos binarios de la imagen dentro del archivo html, por lo que está incrustado.

Answer 5

Puede usar phpThumb, para cambiar el tamaño y recortar las imágenes sobre la marcha. Utiliza la biblioteca GD para crear miniaturas de imágenes JPEG, PNG, GIF, etc.