отображение: гибкие и не отвечающие фотографии 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

Изображения не должны иметь фиксированную ширину, если вы хотите адаптивного поведения.Вам лучше поставить ширину: 100%;к изображениям и высоте, которую вы хотите.В любом случае, для лучшего ответа вы должны поместить весь замешанный код в этом случае в html и css.:)