5

Deseo lograr es adaptar las imágenes en su contenedor sin que este vaya a sobre salir del mismo ya sea porque es más alto o ancho su resolución de imagen.

Si ustedes pueden ejecutar la siguiente estructura de diseño, van observar que algunas imágenes se muestran de un alto/ancho diferente dejando un mal aspecto del diseño.

.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>

Entonces como puedo lograr que estas imágenes se adapten a su contenedor de un alto y ancho especifico incluso si la imagen sea demasiado pequeño o extremadamente grande, he utilizado lo siguiente:

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

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

Pero no logró adaptar las imágenes.

1
  • La respuesta depende de si quieres que se toque el "aspect ratio" de las imagenes, pero un de los detalles es que el contenedor tenga el estilo "overflow:hidden" para que no sobresalga, entonces el tema es que parte quieres que recorte cuando no encaje. Commented el 16 dic. 2020 a las 9:59

3 respuestas 3

6

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

4
+100

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>

2
  • Hola, este ejemplo me agrada, pero no existe alguna otra forma o una combinación de esta para que esa imagen se adapte a su contenedor pero sin que se deforme, por ejemplo si esa imagen inmensa la edito en algún programa ya sea paint, 'photoshop' solo usando la opción de cambiar el tamaño de la imagen, esa imagen pese a ser sometida al cambio normalmente se mantiene sin ser deformada.
    – Valentina
    Commented el 23 dic. 2020 a las 1:35
  • te agregue un debug overlay para que veas la imagen original y constates que no se deforme ( pasa el mouse arriba de la foto ) Commented el 23 dic. 2020 a las 11:29
3

Con darle una altura fija al contenedor de la imagen thumbnail y decirle a la imagen que ocupe la máxima altura de su contenedor con height: 100%; se resuelve el problema

.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>

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.