在保持响应能力的同时逐个显示图像

Question

我自己创建了一个简单的html＆amp; css提高我在这方面的技能，同时学习响应式设计。

我想在我的移动视图上显示这3张图片，但是它们一直在右侧，这会在右侧产生很多空白，并且图像没有正确显示在我想要的位置。 它目前向右侧，导致右侧的空白。如何解决这个问题？

我已尝试使用以下代码段的媒体查询来提供响应能力。

@media only screen and (max-width:700px) {
   .articles {
    margin: 50px 30px;
   }
   .article {
    left: 0;
    width:100%;
   }
}

我的html图片。

<!-- ROW 1 -->

<section class="articles">


    <article class="article">
      <img class="article-image" src="/images/layer-2.jpg">
      <div class="article-text-wrapper">
        <h3 class="article-title">Issue 1</h3>
        <div class="article-description">

        </div>

      </div>
    </article>

    <article class="article">
      <img class="article-image" src="/images/layer-4.jpg">
      <div class="article-text-wrapper">
        <h3 class="article-title">Issue 2</h3>


        </div>

      </div>
    </article>

    <article class="article">
      <img class="article-image" src="/images/layer-6.jpg">
      <div class="article-text-wrapper">
        <h3 class="article-title">issue 3</h3>

      </div>
    </article>

  </section>

Answer 1

提供img width: 100%：

.article img {
  width: 100%;
}