Resizing images in div to fit its height

Question

I have a div with 6 images inside of it. The images are different sizes and proportions. Is there a way to resize them in css to fit the div without specifying the size for each one of them seperately?

<div class="col-md-8 col-md-offset-2 pt-30">
  <img src="img/exploded/6.png" id="img6" class="wow fadeInDown" data-wow-delay="1.5s"/>
  <br>
  <img src="img/exploded/5.png" id="img5" class="wow fadeInDown" data-wow-delay="1.3s"/>
  <br>
  <img src="img/exploded/4.png" id="img4" class="wow fadeInDown" data-wow-delay="1.1s"/>
  <br>
  <img src="img/exploded/3.png" id="img3" class="wow fadeInDown" data-wow-delay="0.9s"/>
  <br>
  <img src="img/exploded/2.png" id="img2" class="wow fadeInDown" data-wow-delay="0.7s"/>
  <br>
  <img src="img/exploded/1.png" id="img1" class="wow fadeInDown" data-wow-delay="0.5s"/>
</div>

Answer 1

img { width: 100% ; max-height: auto; }

Should give you what you want

Edit: swapped css elements

Answer 2

#your-img {
height: auto; 
width: auto; 
max-width: 300px; 
max-height: 300px;}

You can use any value you like in % or px. Just play arround with the values.