html - 显示 : flex and unresponsive photos HTML + CSS

Question

我有文章和图片部分:

<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

如果你想要一个响应式的行为，图像不能有固定的宽度。你最好把 width:100%;到你想要的图像和高度。 无论如何，为了获得更好的响应，您必须将所有涉及的代码放在这种情况下的 html 和 css 中。 :)