如何在移动/小视图中使网格中的图像响应？

Question

我试图使图像可调整大小/响应，我一直在尝试一切 - 将div周围的图像设置为标准杆。 px中的大小，并给出图像百分比以及所有其他类似的东西，如最小/最大宽度，在线查找解决方案等但没有任何作用。有什么想法吗？

HTML：

<section id="skills" class=" skillsSection">
    <div class="container">
        <div class="row skillsHeader">
            <div class="col-lg-12 text-center">
                <div class="vertical">
                    <h3 class="H2">
                 <span>SKILLS</span>
                 </h3>
                </div>

            </div>
        </div>
        <div class="row skillsRow">

            <div class="col-md-3 skills-item wow zoomIn">
                <img src="images/..." class="img-responsive" alt="">
            </div>
            <div class="col-md-3 skills-item wow zoomIn">
                <img src="images/..." class="img-responsive" alt="">
            </div>
            <div class="col-md-3 skills-item wow zoomIn">
              <img src="images/..." class="img-responsive" alt="">
            </div>
            <div class="col-md-3 skills-item wow zoomIn">
                <img src="images/..." class="img-responsive" alt="">
            </div>

            <div class="col-md-3 skills-item wow zoomIn">
                <img src="images/..." class="img-responsive" alt="">
            </div>

            <div class="col-md-3 skills-item wow zoomIn">
                <img src="images/..." class="img-responsive" alt="">
            </div>

            <div class="col-md-3 skills-item wow zoomIn">
                <img src="images/..." class="img-responsive" alt="">
            </div>

        </div>
    </div>
</section>

的CSS：

skills-item img {
  width: 50px;
}

.img-responsive{
  width: 100%;
  height:auto;
}