调整div中的图像大小以适应其高度

Question

我有一个div，里面有6张图片。 图像的大小和比例不同。 有没有办法在css中调整大小以适应div而不单独指定每个div的大小？

<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; }

应该给你你想要的东西

编辑：交换css元素

Answer 2

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

您可以在％或px中使用您喜欢的任何值。 只需使用值进行循环播放。