Ajustar una imagen a un div: Ejemplo completo

Ajustar una imagen a un div. Hoy en día las páginas web son visitadas desde cualquier dispositivo que tenga acceso a internet. Por ejemplo, la Tablet, PC de escritorio, Smartphone, Laptops, entre otros dispositivos electrónicos. Sin embargo, hay páginas web en donde las imágenes se adaptan con total facilidad a cualquier tipo de resolución.

Por lo tanto, esa es la meta de este tutorial. Lo que haremos es tener una imagen y redimensionarla cuando estilos CSS3, respetando los diversos tipos de resoluciones de pantalla.

Ajustar una imagen a un div: Ejemplo completo

A continuación, realizaremos una serie de ejemplos para lograr nuestro cometido.

Ajustar imagen de fondo dentro de un div o capa en HTML

En este tipo de ajuste veremos cómo ajustar una imagen de fondo dentro de un DIV

Primera forma de ajustar imagen

En esta forma usaremos estilos CSS y de fondo colocaremos la imagen y esta será 100% responsiva a la capa HTML.

.img{
  margin:10px auto;
  border-radius:5px;
  border: 1px solid #999;
  padding:13px;
  width:220px;
  height:220px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background:url(../img/imagen.jpg);
  background-size: cover;
  }
.img img{
  width: 100%;
}
@media all and (min-width: 500px) and (max-width: 1000px)
{  
.img{
  margin:20px auto;
  border-radius:5px;
  border: 1px solid #999;
  padding:13px;
  width:300px;
  height:300px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background:url(../img/imagen.jpg);
  background-size: cover;
  
  }
}
.img img{
   width:100%;
}

Contenedor para mostrar la imagen responsiva y ajustada.

 <div class="img"></div>

Segunda forma de ajustar imagen

Ajustar imagen tipo IMG dentro de un contenedor

Hace un buen tiempo ya existe la propiedad background-size: cover en los principales navegadores web. Sin embargo, hemos estado esperando una alternativa para tratar las imágenes contenidas en etiquetas tipo img. La solución mas próxima era el uso de JavaScript.

Por lo tanto, hoy en día, gozamos de una herramienta potente para los navegadores desde hace unos años saliendo como una buena alternativa para poder tratar a las imágenes: nos referimos a las propiedades object-fit y object-position.

Código CSS para este ejercicio

<style type="text/css">
*{margin: 0; padding: 0;}
.caja{
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  background: #333944;
}
.box{
  width: 450px;
  height: 300px;
  background: #CCC;
  overflow: hidden;
}

.box img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .box img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}
</style>

Mostrando las etiquetas HTML para este ejercicio

<div class="caja">
  <div class="box">
    <img src="img/god.jpg" alt="Cargando imagen...">
  </div>
</div>

CONCLUSIÓN

A estas alturas hablar de imágenes responsivas es casi ya algo estándar en el entorno web. Las principales compañías están optimizadas al 100% para que la página web sea totalmente amigable al usuario final.

Además, si un usuario ve una página elegante se quedará ahí, navegando cómodamente en nuestro web. Sin embargo, si ve una página que carece de estas tecnologías saldrá inmediatamente y con ello nuestra tasa de rebote se incrementará perjudicando nuestra empresa.

pensando en esta problemática, decidimos crear un artículo donde podemos poner fin a estos inconvenientes.

DESCARGA

Les dejaré un comprimido con ejemplos para que puedan instalarlo en su servidor web.