Home / Questions / 412083
Accepted
Valentina
Asked: 2021-12-04 18:42:05 +0800 CST 2021-12-04 18:42:05 +0800 CST

How to fit images to the exact size of a container without overflowing its container?

  • 772

I want to achieve is to adapt the images in its container without it going to go out of it either because its image resolution is higher or wider.

If you can execute the following layout structure, you will notice that some images are displayed in a different height/width leaving a bad appearance of the layout.

.bg-dark-1 {
  background-color: #1A1A1A;
}

.module-2 {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}

.post {
  margin: 0.7em;
  overflow: hidden;
}

.thumbnail {
  position: relative;
}

.date {
  position: absolute;
  min-width: 48px;
  min-height: 48px;
  background-color: #fff;
  color: #700877;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 0;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  text-align: center;
  text-transform: uppercase;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.date span {
  display: block;
  line-height: 14px;
}

.date * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.date .month {
  font-size: 11px;
}

.thumbnail img {
  width: 100%;
  object-fit: cover;
}

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .col-3 {
    -webkit-box-flex: 0;
    flex: 1 30%;
  }
}
<div class="box module-2 bg-dark-1">
  <div class="col-3">
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">4 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/Hw3DWPb.jpg" alt="Fidel Martinez ">
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/575/fidel-martinez-a-poca-horas-de-dejar-el-futbol-asiatico">
          <h2 class="sub_title colr-yellow2">Fidel Martinez a poca horas de dejar el futbol asiático</h2>
        </a>
        <p class="result">El delantero ecuatoriano jugaría en México la próxima...</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Justo ahora</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">3 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/q9zkveT.jpg" 
        alt="Lucas Mancinelli con la camiseta del Deportivo Cuenca - Liga Pro" />
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/567/barcelona-sc-ira-con-todo-por-el-fichaje-de-este-volante-figura-de-liga-pro">
          <h2 class="sub_title colr-yellow2">Barcelona SC irá con todo por el fichaje de este volante figura de Liga Pro</h2>
        </a>
        <p class="result">El ídolo quiere reforzar su zona media para el 2021</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 6 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">3 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/PMETFiU.jpg" alt="Pedro Ortiz ">
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/564/pedro-ortiz-y-su-nuevo-apodo-en-emelec">
          <h2 class="sub_title colr-yellow2">Pedro Ortiz y su nuevo apodo en Emelec</h2>
        </a>
        <p class="result">Así lo conocen al arquero eléctrico en el club</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 15 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">3 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/2JzsuOo.jpg" alt="Franklin Guerra">
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/561/franklin-guerra-ya-tendria-su-remplazo-ante-una-posible-salida-la-proxima-temporada">
          <h2 class="sub_title colr-yellow2">Franklin Guerra ya tendría su remplazo ante una posible salida la próxima temporada</h2>
        </a>
        <p class="result">Liga de Quito se prepara para el 2021</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 18 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">2 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/Ttz27Hl.jpg" 
        alt="Osbaldo Lastra vistiendo la camiseta de Barcelona" />
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/558/nueva-demanda-para-barcelona-por-valores-pendientes">
          <h2 class="sub_title colr-yellow2">Nueva demanda para Barcelona por valores pendientes</h2>
        </a>
        <p class="result">Osbaldo Lastra denuncia a los toreros por atraso en...</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 2 días</span>
        </div>
      </div>
    </div>
  </div>
</div>

So how can I get these images to fit their container of a specific height and width even if the image is too small or extremely large, I used the following:

.thumbnail img {
    width: 100%;
    object-fit: cover;
}

img {
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

But he failed to adapt the images.

html5

3 Answers

  1. El problema radica en que las imágenes que incluyes tienen tamaños muy diferentes, en este caso, lo ideal sería que procurases que todas tuvieran dimensiones iguales para evitar problemas de visualización, pero no obstante, puedes ahora mismo con tu código optar por varias opciones.

    La primera que te planteo tiene que ver con aportarles propiedades de css como max-height y min-height que lo que harán será obligar a la imagen a no rebasar nunca el contenedor ya que tiene una dimensiones forzadas en el código.

    La segunda de estas opciones consiste en obligar a la imagen a conservar su forma original en cuanto a sus proporciones pero obligando a este escalado también con css, en este caso dándoles un alto fijo con un height y un ancho del 100% con respecto a este alto fijo. Puedes ver el ejemplo que he preparado en tu código con el fondo gris para disintiguirlo del original.

    .bg-dark-1 {
    background-color: #1A1A1A;
}

.module-2 {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
}
.post {
    margin: 0.7em;
    overflow: hidden;
}
.thumbnail {
    position: relative;
}
.date {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    background-color: #fff;
    color: #700877;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.date span {
    display: block;
    line-height: 14px;
}

.date * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.date .month {
    font-size: 11px;
}

.thumbnail img {
    width: 100%;
    object-fit: cover;
    vertical-align: top;
    min-height:250px;
    max-height:250px;
}

/*css añadido para ejemplo img original*/

#pruebaContain.bg-dark-1 {
    background-color: #ccc;
}
#pruebaContain .thumbnail {margin: 0 auto; text-align:center;}
#pruebaContain .thumbnail img {
    width: auto;
    vertical-align: top;
    height:250px;
}

/*fin css añadido para ejemplo img original*/

img {
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: top;

}
@media (min-width: 768px){
.col-3 {
    -webkit-box-flex: 0;
    flex: 1 30%;
}
}
    <div class="box module-2 bg-dark-1">
                            <div class="col-3">
                            </div>
                            <div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">4 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/Hw3DWPb.jpg" alt="Fidel Martinez ">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/575/fidel-martinez-a-poca-horas-de-dejar-el-futbol-asiatico">
                                        <h2 class="sub_title colr-yellow2">Fidel Martinez a poca horas de dejar el futbol asiático</h2>
                                    </a>
                                    <p class="result">El delantero ecuatoriano jugaría en México la próxima...</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Justo ahora</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">3 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/q9zkveT.jpg" alt="Lucas Mancinelli con la camiseta del Deportivo Cuenca - Liga Pro">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/567/barcelona-sc-ira-con-todo-por-el-fichaje-de-este-volante-figura-de-liga-pro">
                                        <h2 class="sub_title colr-yellow2">Barcelona SC irá con todo por el fichaje de este volante figura de Liga Pro</h2>
                                    </a>
                                    <p class="result">El ídolo quiere reforzar su zona media para el 2021</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 6 horas</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">3 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/PMETFiU.jpg" alt="Pedro Ortiz ">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/564/pedro-ortiz-y-su-nuevo-apodo-en-emelec">
                                        <h2 class="sub_title colr-yellow2">Pedro Ortiz y su nuevo apodo en Emelec</h2>
                                    </a>
                                    <p class="result">Así lo conocen al arquero eléctrico en el club</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 15 horas</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">3 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/2JzsuOo.jpg" alt="Franklin Guerra">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/561/franklin-guerra-ya-tendria-su-remplazo-ante-una-posible-salida-la-proxima-temporada">
                                        <h2 class="sub_title colr-yellow2">Franklin Guerra ya tendría su remplazo ante una posible salida la próxima temporada</h2>
                                    </a>
                                    <p class="result">Liga de Quito se prepara para el 2021</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 18 horas</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">2 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/Ttz27Hl.jpg" alt="Osbaldo Lastra vistiendo la camiseta de Barcelona">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/558/nueva-demanda-para-barcelona-por-valores-pendientes">
                                        <h2 class="sub_title colr-yellow2">Nueva demanda para Barcelona por valores pendientes</h2>
                                    </a>
                                    <p class="result">Osbaldo Lastra denuncia a los  toreros por atraso en...</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 2 días</span>
                                    </div>
                                </div>
                            </div>
                        </div>                      
                    </div>
                    
          <!-- html añadido para ejemplo img original -->
          
     <div id="pruebaContain" class="box module-2 bg-dark-1">
                            <div class="col-3">
                            </div>
                            <div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">4 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/Hw3DWPb.jpg" alt="Fidel Martinez ">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/575/fidel-martinez-a-poca-horas-de-dejar-el-futbol-asiatico">
                                        <h2 class="sub_title colr-yellow2">Fidel Martinez a poca horas de dejar el futbol asiático</h2>
                                    </a>
                                    <p class="result">El delantero ecuatoriano jugaría en México la próxima...</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Justo ahora</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">3 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/q9zkveT.jpg" alt="Lucas Mancinelli con la camiseta del Deportivo Cuenca - Liga Pro">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/567/barcelona-sc-ira-con-todo-por-el-fichaje-de-este-volante-figura-de-liga-pro">
                                        <h2 class="sub_title colr-yellow2">Barcelona SC irá con todo por el fichaje de este volante figura de Liga Pro</h2>
                                    </a>
                                    <p class="result">El ídolo quiere reforzar su zona media para el 2021</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 6 horas</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">3 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/PMETFiU.jpg" alt="Pedro Ortiz ">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/564/pedro-ortiz-y-su-nuevo-apodo-en-emelec">
                                        <h2 class="sub_title colr-yellow2">Pedro Ortiz y su nuevo apodo en Emelec</h2>
                                    </a>
                                    <p class="result">Así lo conocen al arquero eléctrico en el club</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 15 horas</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">3 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/2JzsuOo.jpg" alt="Franklin Guerra">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/561/franklin-guerra-ya-tendria-su-remplazo-ante-una-posible-salida-la-proxima-temporada">
                                        <h2 class="sub_title colr-yellow2">Franklin Guerra ya tendría su remplazo ante una posible salida la próxima temporada</h2>
                                    </a>
                                    <p class="result">Liga de Quito se prepara para el 2021</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 18 horas</span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-3">
                        <div class="post">
                                <div class="thumbnail">
                                    <div class="date">
                                        
            <span class="day">2 </span>
            <span class="month">Dic</span>
        
                                    </div>
                                    <img src="https://i.imgur.com/Ttz27Hl.jpg" alt="Osbaldo Lastra vistiendo la camiseta de Barcelona">
                                </div>
                                <div class="text-horizontal">
                                    <a href="es/deportes/futbol/ecuador/ligapro/serie-a/558/nueva-demanda-para-barcelona-por-valores-pendientes">
                                        <h2 class="sub_title colr-yellow2">Nueva demanda para Barcelona por valores pendientes</h2>
                                    </a>
                                    <p class="result">Osbaldo Lastra denuncia a los  toreros por atraso en...</p>
                                    <div class="post-date">
                                        <span class="timestamp colr-white2">Hace 2 días</span>
                                    </div>
                                </div>
                            </div>
                        </div>                      
                    </div>
                    
      <!-- fin html añadido para ejemplo img original -->

    Una tercera posibilidad consistiría en incluir las imágenes como background dándole las propiedades necesarias para que cubra todo el espacio del contenedor usando background-size: cover; background-position: center; background-repeat: no-repeat; quedando algo parecido a este ejemplo:

    .backgroundEjemplo {background: url("url de tu imagen") cover no-repeat center;}

    Comparto a continuación un enlace de utilidad documental para el uso de estas proiedades que espero pueda resultarte de ayuda: css-background

    • 6
  2. Best Answer

    Si ya estás usando object-fit: cover; para la imagen, le das ancho y alto 100% para que afecte a toda el area con el cover. Al contenedor le fijas el alto ( height: 240px; ) y le decis que oculte lo que sobre ( overflow: hidden; )

    Luego si querés que la imagen esté posicionada al borde usas object-position ( default 50% 50% ), para que esté al borde superior sería object-position: 50% 0;. Aunque siendo fotografía deportiva donde por lo general la acción ( o puntos de interés ) está en los vertices de los tercios de la imagen, desplazarla verticalmente un 15% ( la mitad del tercio ) quedaría bastante aceptable.

    .thumbnail {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}


    document.addEventListener('DOMContentLoaded', function() {
  // código debug

  var miniaturas = document.getElementsByClassName("thumbnail")
  let idx = miniaturas.length;
  while (idx--) {
    let imagen = miniaturas[idx].querySelector('img')
    let detalle = document.createElement("div")
    let detalleImg = document.createElement("img")

    detalle.classList.add('detalle')
    detalleImg.src = imagen.src

    detalle.appendChild(detalleImg)
    miniaturas[idx].appendChild(detalle)
  }
});
    .bg-dark-1 {
  background-color: #1A1A1A;
}

.module-2 {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}

.post {
  margin: 0.7em;
  overflow: hidden;
}

.thumbnail {
  position: relative;
}

.date {
  position: absolute;
  width: 48px;
  height: 28px;
  background-color: #fff;
  color: #700877;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 0;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  text-align: center;
  text-transform: uppercase;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.date span {
  display: block;
  line-height: 14px;
}

.date * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.date .month {
  font-size: 11px;
}

.thumbnail img {
  width: 100%;
  object-fit: cover;
}

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .col-3 {
    -webkit-box-flex: 0;
    flex: 1 30%;
  }
}


/* deco */

a,
p,
.post-date {
  font-family: verdana;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: chocolate;
}

p,
.post-date {
  color: #fef;
}


/* fixes */

.thumbnail {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}


/* debug */

.thumbnail .detalle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  z-index: 999999;
  border: 1px dashed red;
}

.thumbnail:hover .detalle {
  display: block;
}

.thumbnail .detalle img {
  width: 100%;
  height: auto;
}


/* debug encuadre de tercios */

.thumbnail .detalle:before,
.thumbnail .detalle:after {
  content: " ";
  display: block;
  border-style: dashed;
  border-color: white;
  position: absolute;
}

.thumbnail .detalle:before {
  width: 33%;
  height: 100%;
  border-width: 0 1px;
  top: 0;
  left: 33%;
}

.thumbnail .detalle:after {
  height: 33%;
  width: 100%;
  border-width: 1px 0;
  left: 0;
  top: 33%;
}
    <div class="box module-2 bg-dark-1">
  <div class="col-3">
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">4 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/Hw3DWPb.jpg" alt="Fidel Martinez ">
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/575/fidel-martinez-a-poca-horas-de-dejar-el-futbol-asiatico">
          <h2 class="sub_title colr-yellow2">Fidel Martinez a poca horas de dejar el futbol asiático</h2>
        </a>
        <p class="result">El delantero ecuatoriano jugaría en México la próxima...</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Justo ahora</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">3 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/q9zkveT.jpg" alt="Lucas Mancinelli con la camiseta del Deportivo Cuenca - Liga Pro" />
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/567/barcelona-sc-ira-con-todo-por-el-fichaje-de-este-volante-figura-de-liga-pro">
          <h2 class="sub_title colr-yellow2">Barcelona SC irá con todo por el fichaje de este volante figura de Liga Pro</h2>
        </a>
        <p class="result">El ídolo quiere reforzar su zona media para el 2021</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 6 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">3 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/PMETFiU.jpg" alt="Pedro Ortiz ">
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/564/pedro-ortiz-y-su-nuevo-apodo-en-emelec">
          <h2 class="sub_title colr-yellow2">Pedro Ortiz y su nuevo apodo en Emelec</h2>
        </a>
        <p class="result">Así lo conocen al arquero eléctrico en el club</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 15 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">3 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/2JzsuOo.jpg" alt="Franklin Guerra">
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/561/franklin-guerra-ya-tendria-su-remplazo-ante-una-posible-salida-la-proxima-temporada">
          <h2 class="sub_title colr-yellow2">Franklin Guerra ya tendría su remplazo ante una posible salida la próxima temporada</h2>
        </a>
        <p class="result">Liga de Quito se prepara para el 2021</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 18 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">

          <span class="day">2 </span>
          <span class="month">Dic</span>

        </div>
        <img src="https://i.imgur.com/Ttz27Hl.jpg" alt="Osbaldo Lastra vistiendo la camiseta de Barcelona" />
      </div>
      <div class="text-horizontal">
        <a href="es/deportes/futbol/ecuador/ligapro/serie-a/558/nueva-demanda-para-barcelona-por-valores-pendientes">
          <h2 class="sub_title colr-yellow2">Nueva demanda para Barcelona por valores pendientes</h2>
        </a>
        <p class="result">Osbaldo Lastra denuncia a los toreros por atraso en...</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 2 días</span>
        </div>
      </div>
    </div>
  </div>
</div>

    • 4

  3. Giving the image container a fixed height thumbnailand telling the image to occupy the maximum height of its container with height: 100%; solves the problem .

    .bg-dark-1 {
  background-color: #1a1a1a;
}

.module-2 {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}
.post {
  margin: 0.7em;
  overflow: hidden;
}
.thumbnail {
  position: relative;
  height: 300px;
}
.date {
  position: absolute;
  min-width: 48px;
  min-height: 48px;
  background-color: #fff;
  color: #700877;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 0;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  text-align: center;
  text-transform: uppercase;
  top: 20px;
  right: 20px;
  z-index: 1;
}
.date span {
  display: block;
  line-height: 14px;
}

.date * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.date .month {
  font-size: 11px;
}

@media (min-width: 768px) {
  .col-3 {
    -webkit-box-flex: 0;
    flex: 1 30%;
  }
}

.thumbnail img {
    width: 100%;
    height: 100%;
}
    <link rel="stylesheet" href="styles.css">

<div class="box module-2 bg-dark-1">
  <div class="col-3"></div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">
          <span class="day">4 </span>
          <span class="month">Dic</span>
        </div>
        <img src="https://i.imgur.com/Hw3DWPb.jpg" alt="Fidel Martinez " />
      </div>
      <div class="text-horizontal">
        <a
          href="es/deportes/futbol/ecuador/ligapro/serie-a/575/fidel-martinez-a-poca-horas-de-dejar-el-futbol-asiatico"
        >
          <h2 class="sub_title colr-yellow2">
            Fidel Martinez a poca horas de dejar el futbol asiático
          </h2>
        </a>
        <p class="result">
          El delantero ecuatoriano jugaría en México la próxima...
        </p>
        <div class="post-date">
          <span class="timestamp colr-white2">Justo ahora</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">
          <span class="day">3 </span>
          <span class="month">Dic</span>
        </div>
        <img
          src="https://i.imgur.com/q9zkveT.jpg"
          alt="Lucas Mancinelli con la camiseta del Deportivo Cuenca - Liga Pro"
        />
      </div>
      <div class="text-horizontal">
        <a
          href="es/deportes/futbol/ecuador/ligapro/serie-a/567/barcelona-sc-ira-con-todo-por-el-fichaje-de-este-volante-figura-de-liga-pro"
        >
          <h2 class="sub_title colr-yellow2">
            Barcelona SC irá con todo por el fichaje de este volante figura de
            Liga Pro
          </h2>
        </a>
        <p class="result">
          El ídolo quiere reforzar su zona media para el 2021
        </p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 6 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">
          <span class="day">3 </span>
          <span class="month">Dic</span>
        </div>
        <img src="https://i.imgur.com/PMETFiU.jpg" alt="Pedro Ortiz " />
      </div>
      <div class="text-horizontal">
        <a
          href="es/deportes/futbol/ecuador/ligapro/serie-a/564/pedro-ortiz-y-su-nuevo-apodo-en-emelec"
        >
          <h2 class="sub_title colr-yellow2">
            Pedro Ortiz y su nuevo apodo en Emelec
          </h2>
        </a>
        <p class="result">Así lo conocen al arquero eléctrico en el club</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 15 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">
          <span class="day">3 </span>
          <span class="month">Dic</span>
        </div>
        <img src="https://i.imgur.com/2JzsuOo.jpg" alt="Franklin Guerra" />
      </div>
      <div class="text-horizontal">
        <a
          href="es/deportes/futbol/ecuador/ligapro/serie-a/561/franklin-guerra-ya-tendria-su-remplazo-ante-una-posible-salida-la-proxima-temporada"
        >
          <h2 class="sub_title colr-yellow2">
            Franklin Guerra ya tendría su remplazo ante una posible salida la
            próxima temporada
          </h2>
        </a>
        <p class="result">Liga de Quito se prepara para el 2021</p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 18 horas</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="post">
      <div class="thumbnail">
        <div class="date">
          <span class="day">2 </span>
          <span class="month">Dic</span>
        </div>
        <img
          src="https://i.imgur.com/Ttz27Hl.jpg"
          alt="Osbaldo Lastra vistiendo la camiseta de Barcelona"
        />
      </div>
      <div class="text-horizontal">
        <a
          href="es/deportes/futbol/ecuador/ligapro/serie-a/558/nueva-demanda-para-barcelona-por-valores-pendientes"
        >
          <h2 class="sub_title colr-yellow2">
            Nueva demanda para Barcelona por valores pendientes
          </h2>
        </a>
        <p class="result">
          Osbaldo Lastra denuncia a los toreros por atraso en...
        </p>
        <div class="post-date">
          <span class="timestamp colr-white2">Hace 2 días</span>
        </div>
      </div>
    </div>
  </div>
</div>

    • 3