显示：flex和无响应的照片HTML + CSS

Question

我有篇文章＆amp;图片：

<div class="section">
    <div class="container" style="display: flex;">
        <% @posts.take(4).each do |post| %>
          <div class="carda" >
            <div class="card-content">
              <%= link_to image_tag post.image.url, style: 'height: 250px; width: 400px;'%>
              <p class="title" style="margin-top: 5px; color:black">
      <%= raw link_to post.title, post  %>
              </p>
            </div>
          </div>
      <% end %>
    </div>
</div>

我有回应问题：

我不知道我是否正确地为文章做了这一部分，我不知道如何让他们在移动设备上做出响应

Answer 1

如果您想要响应行为，则图像的宽度不得超过固定宽度。你最好把宽度：100％;到图像和你想要的高度。 无论如何，为了更好的响应，你必须把所有牵连的代码放在这种情况下html和css。 ：）