Limit image size

Asked

Viewed 993 times

0

I have a news listing and I would need all images to be limited by one height, but I can’t define a specific value, otherwise the image can stretch. All images should be the same size and width. You can cut if applicable.

How to do?

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

  • max-height does not solve the problem?

  • @white stretches the image.

  • the image has to stay in original size and just adjust the div? Or the image has to adjust to the size of the div?

  • The image has to adjust as the div.

  • complicou, you say in the question "All images must have the same size and width" and in the commentary it says "The image has to adjust according to the div"

  • In fact, the image has to be based on the size of the div. Ideally, in the list everything had the same size, you know?

Show 1 more comment

2 answers

2


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

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

BUT, nor should you define 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>

  • Almost that. It would have to leave the images at 100% width?

  • Look: if you want all images to have the same width and height, the images that have different dimensions will be stretched.

  • If one were to exceed the height, it would have cut her?

  • @Felipestoker would have if you created a div instead of the image and made the image a background of that div.

  • @Felipestoker Look at this Fiddle. In the example, I put 150px to div: https://jsfiddle.net/v4mfd8x8/

1

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

The change I made was to add the div with class img-overflow out of all your pictures 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;
}

This way he picks up creates his images with width: 100%; and maximum height proportionally and center 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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.