1

tengo un contenedor DIV

<div class="col">
   <figure>
       <img src="../images/imagen.jpg" alt="Title">
       <figcaption>Eesta es mi imagen</figcaption>
   </figure>
</div>

el cual tiene el siguiente código css

.col {
padding-right: 0;
padding-left: 1em;
width: 64%;
}
.col figure img {
width: 100%;
display: block;
}

Las imágenes las sube el usuario, con lo cual se desconoce el tamaño. Según está, las imágenes grandes, mayores que el contenedor, se ajustan correctamente al ancho.

El problema es que si una imagen es más pequeña, esta también se ajusta al 100% del div y lo que quiero es que mantenga su aspecto.

¿Alguna idea para solucionarlo?

Salu2

1
  • 1
    Si las imágenes las sube el usuario probablemente lo hace utilizando algun script. En este caso puedes recuperar la anchura y la altura de la imagen y utilizarla
    – enxaneta
    el 13 jul. 2020 a las 12:43

2 respuestas 2

5

Podrías usar la propiedad CSS max-width en vez de width para tus imágenes. De esa manera podrías hacer que tus imágenes no excedan el tamaño de su contenedor y a la vez no redimensionarlas en caso de no excederlo.

.col {
  padding-right: 0;
  padding-left: 1em;
  width: 500px;
  background-color: yellow;
}

.col figure img {
  max-width: 100%;
  display: block;
}
<div class="col">
   <figure>
       <img src="https://www.fundacion-affinity.org/sites/default/files/como-conseguir-gatitos-y-gatitas-sociables.jpg">
       <figcaption>Imagen que excede el tamaño que le permite .col</figcaption>
   </figure>
</div>

<div class="col">
   <figure>
       <img src="https://www.paragatitos.com/wp-content/uploads/sonido-maullido-de-gato-150x150.jpg">
       <figcaption>Imagen que NO excede el tamaño que le permite .col</figcaption>
   </figure>
</div>

2
  • siguiendo la respuesta de @phpMyGuel, ha funcionado lo que quería hacer. Salu2
    – Carl Rguz
    el 14 jul. 2020 a las 10:19
  • @CarlRguz si esta respuesta te sirvió, márcala como aceptada y considera darle un +1
    – Alvaro Montoro
    el 15 jul. 2020 a las 15:21
0

Lo correcto es lo comentado por @phpMyGuel ya que la propiedad max-width: establece el tamaño máximo que puede proyectarse una imagen, si el tamaño es menor simplemente se muestra sin problemas

<div class="col">
   <figure>
       <img src="https://www.paragatitos.com/wp-content/uploads/sonido-maullido-de-gato-150x150.jpg" style="max-width:130px">
       <figcaption>Imagen que NO excede el tamaño que le permite .col</figcaption>
   </figure>
</div>

Ese es un ejemplo de inserción directa desde la etiqueta img, pero lo recomendado es separarlo en una hoja de estilo como @phpMyGuel

1
  • Por eso hice la acotación al final de separarlo en una hoja de estilos o bien en una etiqueta style como lo indicas! el 13 jul. 2020 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.