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

I have a dynamic list in% com_of_commercial guide where there are banners with different dimensions, but all are being stretched to the maximum. How can banners be listed in their actual size and with responsiveness?

See what's happening in the picture:

Thedimensionsoftheaboveimagearebeingpushedtothemaximumsizelimitofphp,butIneedeachimagetohaveitsactualdimensions.

<sectionclass="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;
}