Ajustar una imagen a un div: Ejemplo completo

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.

Índice

    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

    Relacionado  jQuery Facebook Notificaciones con sonido

    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.

    Relacionado  WhatsApp en tu web: Paso a paso como integrarlo

    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>
    Ajustar una imagen a un div Ejemplo completo
    Ajustar una imagen a un div Ejemplo completo

    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.

    Relacionado  Actualizar ventana padre desde popup: JavaScript Ejemplos

    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.

    Descargar

    Nestor Tapia

    Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

    Entradas Relacionadas

      3 Comentarios

    1. Gaby Gaeta dice:

      Mil gracias !!!

    2. gerardo dice:

      gracias por tu ayuda, me sirvio un monton!!!!!!!!!!!!!

    3. Vicky Art dice:

      Muchas gracias por tu aporte

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir