> Faqs > Ancho maximo para una imagen

Ancho maximo para una imagen

Ando con un problemita, les cuento. Necesito saber cómo se puede limitar el ancho de una imagen.

Es decir el ancho maximo que tiene mi div es de 500px y como las imagenes que cargo ahi es subida por mi cliente, necesitaria que si la imagen es mas ancha la ajuste a 500px de ancho, sin perder la relacion del tamaño (alto x ancho).

Se entiende? es decir que si se sube una imagen menor a 500px de ancho la deje como esta, si es mayor proceda a ajustarle el tamaño. Ojo no necesito que le cambie el tamaño real a la imagen, solo que lo ajuste con las propiedades heigth y width, aunque si la unica solución es cambiarle el temaño real no hay drama.

Uso PHP version 5 por si sirve de algo. Muchas Gracias!

Respuestas

mediante la funcion getimagesize puedes obtener las dimensiones de una imagen, con ello ya puedes operar de la manera que te convenga.

ocp001a

En tu caso la solución es simplemente usar CSS. Si es que no te importa que la imagen original sea mayor al tamaño de la imagen que se está mostrando en la página.

Tienes simplemente que ajustar el ancho de la imagen con un CSS como este:

img {
    max-width: 100%
}

Aquí tienes que tener en cuenta algunos detalles.

  • El selector de CSS que hemos usado (img) afectaría a todas las imágenes de tu página. Quizás tengas que ser un poco más preciso, usando selectores que indiquen que se afecte a las imágenes más concretas. Por ejemplo el selector ".content img" afectaría a las imágenes que están dentro de otro elemento con class="content".
  • En este caso estamos definiendo 100% como valor de max-with. Eso hace que la imagen no crezca más en anchura que el tamaño de anchura que tenga el contenedor donde se está presentando la imagen. Quizás no quieras que crezca tanto, podrías bajar ese porcentaje.
  • No te preocupes porque solo definas la anchura, puesto que al no definir la altura se calculará para que la imagen tenga tamaño proporcional.
Miguel Angel
3295 146 215 17