Limit image size

Question

Limit image size

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

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>

css

asked by anonymous 04.09.2017 / 18:58

2 answers

1

@Dvdsamm has provided an excellent solution. I took his example to give you an alternative if you want to "crochet" the images over 100px.

The change I made was to add the div with class img-overflow out of all your images and set:

.img-overflow {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100px;
}

And I left your images like this:

.novidade-texto img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  display: block;
}

In this way, it picks up its images with width: 100%; and maximum height proportionally and centers them vertically.

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;
}

.img-overflow {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100px;
}

.novidade-texto img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  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">
<div class="img-overflow">
<img src="https://image.slidesharecdn.com/ceciestuntest2-1212011503842739-8/95/teste-de-inteligencia-1-728.jpg?cb=1211986860"class="img-destaque img-destaque-listagem">
</div>
<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">
<div class="img-overflow">
<img src="http://www.montatudo.com/i/montatudo/9931161998_266231.jpg"class="img-destaque img-destaque-listagem">
</div>
<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">
<div class="img-overflow">
<img src="http://www.montatudo.com/i/montatudo/9931161998_266231.jpg"class="img-destaque img-destaque-listagem">
</div>
<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">
<div class="img-overflow">
<img src="/uploads/imagens/59a5a00003656_900x.jpg" class="img-destaque img-destaque-listagem">
</div>
<span class="info-data">29/08</span>
  <h3>Post teste</h3>
  </div>
  </span>
</a>
</div>

04.09.2017 / 21:50

How to identify that the application has stopped working? Ties with arrays array not working

score 2 · Accepted Answer

You can set a maximum height ( max-height ) to images in class .novidade-texto img :

.novidade-texto img {
  max-width: 100%;
  margin: 30px auto;
  display: block;
  max-height: 100px; /*Por exemplo, 100px máximo*/
}

BUT, you should also not set a width ( width ) in the same images as you are doing in the class below:

.img-destaque-listagem {
  width: 100%;
}

Delete this class above.

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 {
}

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;
  max-height: 100px;
}

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