I have a news listing and would need all images to be limited by a height , but I can not set a specific value, otherwise the image may stretch. All images should be the same size and width. You can cut if any.
How to do it?
item h1,
.blog h1 {
font: 40px/40px "Niemeyer-BoldIt";
margin: 50px 0;
}
.blog span {
font: 12px/12px "Niemeyer-Regular";
color: #000;
}
.news li {
width: 100%;
}
.img-destaque-listagem {
width: 100%;
}
a.noticia-destaque {
display: inline-block;
width: 30.33%;
text-decoration: none;
border: 1px solid #e0e0e0;
padding: 10px;
margin: 10px;
box-sizing: border-box;
border-radius: 5px;
}
.noticias-destaque {
font-size: 0;
}
.noticia-destaque h3 {
font: 15px/17px 'Niemeyer-SemiBold', sans-serif;
text-decoration: none;
}
.info-data {
margin-top: 15px;
display: block;
}
.novidade-texto p {
font: 15px/25px 'Niemeyer-Light', sans-serif;
}
.novidade-texto img {
max-width: 100%;
margin: 30px auto;
display: block;
}
<div class="noticias-destaque">
<a class="noticia-destaque" href="/noticias/2017-08-29/post-title">
<span class="img" style="background-image: url(/uploads/imagens/59a6ebc2753ed_900x.jpg);"></span>
<span class="info">
<div class="novidade-texto">
<img src="https://image.slidesharecdn.com/ceciestuntest2-1212011503842739-8/95/teste-de-inteligencia-1-728.jpg?cb=1211986860"class="img-destaque img-destaque-listagem">
<span class="info-data">29/08</span>
<h3>post title </h3>
</div>
</span>
</a>
<a class="noticia-destaque" href="/noticias/2017-08-29/post-teste">
<span class="img" style="background-image: url(/uploads/imagens/59a5a0db9ff74_900x.jpg);"></span>
<span class="info">
<div class="novidade-texto">
<img src="http://www.montatudo.com/i/montatudo/9931161998_266231.jpg"class="img-destaque img-destaque-listagem">
<span class="info-data">29/08</span>
<h3>post teste </h3>
</div>
</span>
</a>
<a class="noticia-destaque" href="/noticias/2017-08-29/post-tste-2">
<span class="img" style="background-image: url(/uploads/imagens/59a5a030249da_900x.jpg);"></span>
<span class="info">
<div class="novidade-texto">
<img src="http://www.montatudo.com/i/montatudo/9931161998_266231.jpg"class="img-destaque img-destaque-listagem">
<span class="info-data">29/08</span>
<h3>post tste 2</h3>
</div>
</span>
</a>
<a class="noticia-destaque" href="/noticias/2017-08-29/post-teste">
<span class="img" style="background-image: url(/uploads/imagens/59a5a00003656_900x.jpg);"></span>
<span class="info">
<div class="novidade-texto">
<img src="/uploads/imagens/59a5a00003656_900x.jpg" class="img-destaque img-destaque-listagem">
<span class="info-data">29/08</span>
<h3>Post teste</h3>
</div>
</span>
</a>
</div>