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.