How to make the IMG tag display the image with real dimensions and responsiveness?

Asked

Viewed 58 times

0

I have a dynamic list on php of commercial guide in which there are banners with several dimensions, only that all are being stretched to the maximum. How to make banners be listed each in their actual size and responsiveness?

See in the image what is happening: inserir a descrição da imagem aqui

The dimensions of the image above are being taken to the maximum limit of the section, but I need each image to stay with its actual dimensions.

<section class="guialistar">
<article>
<h2>TITULO</h2>
<figure>
<img src="./propaganda_guiacomercial/banner/falqueto.jpg">
</figure>
</article>
</section>

CSS

.guialistar{
  position: relative;
  float: left;
  width: 100%;
  margin-top: 10px;
}

.guialistar h2 {
  font-size: 20;
  background-color: #E2EDF5;
  color: #0E69A9;
  padding:10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.guialistar img{
  float: left;
  width: 100%;
  max-width: 885px;
  height: auto;
}
css
  • 1

    you are setting in the img tag that width is 100%, this makes the image always have the total width of the parent div, in case to guide it

  • @Brunocastro But what value should I define so that the banners have real size and resposivity?

  • Actual size would be the original size of the image? if that’s it you don’t need to set any width! The image will be loaded from the original size

  • @Brunocastro I did the requested and did not work, continues the same way.

  • 2

    Do it this way. . guide list img{ float: left; }, remember to update the browser with Ctrl+F5 to clear the browser cache. If it doesn’t work come back here and we’ll try to solve it another way :)

  • @Brunocastro Worked perfectly! Thank you very much.

  • Good! I’ll turn it into ok answer?

Show 2 more comments

1 answer

2


Do it this way. 

.guialistar img{ 
  float: left; 
}

When we don’t define any width for the tag img the image is loaded and displayed in its original dimensions.

remember to update the browser with Ctrl+F5 to clear the browser cache.

Browser other questions tagged css

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