Как сделать встроенные изображения отзывчивыми на небольших экранах

Я просматриваю некоторые изображения в своем приложении rails"

<% @attachments.each do |attachment| %>
  <div class = "img-thumbnail" style = "display:inline-block; margin:auto; text-align: center; padding-top: 15px; width: 120px;">
    <%=image_tag attachment.images_url(:thumb).to_s %>
      <div class = "desc">
        <%= link_to "Remove", remove_image_path(attachment), data: { confirm: "Are you sure you want to delete this image?" }, :method => :delete, :style => "text-decoration: none !important" %>
      </div>
  </div>
<% end %>

Изображения отображаются встроенными и начинаются с левой стороны, что я и хотел. Теперь мне интересно, есть ли способ заставить изображение занимать ширину 100% только тогда, когда экран меньше?

Я создал фиктивный фрагмент для помощи.

.form-border {
  padding-bottom: 20px;
  padding-top: 20px;
  border: 1px solid lightgrey;
  border-radius: 8px;
  background-color: white;

}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class = "container">
  <div class = "row">
    <div class = "col-md-8 offset-md-2">
      <div class = "container form-border">
        <div class = "img-thumbnail" style = "display:inline-block; margin:auto; text-align: center; padding-top: 15px; width: 120px;">
          <img src = "pic_trulli.jpg" alt = "Italian Trulli">
          <div class = "desc">Remove</div>
          <img src = "pic_trulli.jpg" alt = "Italian Trulli">
          <div class = "desc">Remove</div
        </div>
      </div>
    </div>
  </div>
</div>

Обновление А

Я последовал ответу @agustin, выполнив следующие действия:

<div class = "img-thumbnail" style = "display:inline-block; margin:auto; text-align: center; padding-top: 15px; width: 120px;">
  <div class = "img-fluid">
    <%=image_tag attachment.images_url(:thumb).to_s %>
 </div>
</div

или

<div class = "img-thumbnail" style = "display:inline-block; margin:auto; text-align: center; padding-top: 15px; max-width: 100%;;">
  <div class = "img-fluid">
    <%=image_tag attachment.images_url(:thumb).to_s %>
  </div>
 </div

но я все равно получаю тот же результат:

Как сделать встроенные изображения отзывчивыми на небольших экранах

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть ошибки в макете.

  1. Помните, что вы не должны создавать еще один элемент .container внутри элемента col или row. Правильный способ .container > .row> .col, и если вы хотите столбцы внутри столбца, вам нужно создать еще один .row с .col внутри, но не другой контейнер.
  2. Класс img-fluid должен применяться к элементу img. Однако вы, вероятно, захотите определить ширину изображения.

Проверьте следующий фрагмент. Я создал два столбца с классом col-md-6, что означает, что на средних экранах (≥768 пикселей) эти столбцы будут занимать 50% ширины строки каждый. Поскольку я не определял никакого класса с col-sm или col-xs, эти столбцы будут занимать 100% ширины строки на маленьких экранах.

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>

<div class = "container">
  <div class = "row">
    <div class = "col-md-8 offset-md-2">
      <div class = "row">
        <div class = "col-md-6">
          <div class = "img-thumbnail">
            <img src = "https://placehold.it/400x300/" class = "img-fluid" alt = "Italian Trulli">
            <div class = "desc">Remove</div>
          </div>
        </div>
        <div class = "col-md-6">
          <div class = "img-thumbnail">
            <img src = "https://placehold.it/400x300/" class = "img-fluid" alt = "Italian Trulli">
            <div class = "desc">Remove</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Спасибо за ответ @agustin, я попробовал оба, и по какой-то причине ни один из них не работал у меня ... Я обновил свой вопрос, добавив некоторую информацию, пожалуйста, проверьте его, если можете.

Dev 15.03.2019 17:48

О, я думал, вы говорите об элементах <img>. Что вам нужно сделать, так это использовать медиа-запросы, чтобы установить ширину столбца на 100%, когда ширина окна меньше X пикселей.

agustin 15.03.2019 17:54

Мне нужно больше HTML и CSS, чтобы помочь вам больше. Можете ли вы обновить свой ответ фрагментом, показывающим результат, похожий на ваш скриншот?

agustin 15.03.2019 17:57

Я только что обновил фрагмент. Предполагается, что изображения отображаются встроенными, но по какой-то причине его нет во фрагменте, с моей стороны, они встроенные. Посмотрите и дайте мне знать, что вы можете сделать!

Dev 15.03.2019 18:13

Другие вопросы по теме