How to make a large image with the width:auto property no longer become a parent div ?
width:100% does not fit as small images are stretched.

  • four
    max-width: 100%? - mJeevas

1 answer 1

It is enough to use max-width: 100% .

Large images will be proportionally reduced and fit into the parent unit.
Small images will be shown unchanged.

 .container { border: 1px solid #000; width: 200px; } .image { max-width: 100%; width: auto; } 
 <div class="container"> <p><img class="image" src="https://satyr.io/50x50/50"></p> <p><img class="image" src="https://satyr.io/300x50/300"></p> </div>