Я просматриваю некоторые изображения в своем приложении 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
но я все равно получаю тот же результат:






У вас есть ошибки в макете.
.container внутри элемента col или row. Правильный способ .container > .row> .col, и если вы хотите столбцы внутри столбца, вам нужно создать еще один .row с .col внутри, но не другой контейнер.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>О, я думал, вы говорите об элементах <img>. Что вам нужно сделать, так это использовать медиа-запросы, чтобы установить ширину столбца на 100%, когда ширина окна меньше X пикселей.
Мне нужно больше HTML и CSS, чтобы помочь вам больше. Можете ли вы обновить свой ответ фрагментом, показывающим результат, похожий на ваш скриншот?
Я только что обновил фрагмент. Предполагается, что изображения отображаются встроенными, но по какой-то причине его нет во фрагменте, с моей стороны, они встроенные. Посмотрите и дайте мне знать, что вы можете сделать!
Спасибо за ответ @agustin, я попробовал оба, и по какой-то причине ни один из них не работал у меня ... Я обновил свой вопрос, добавив некоторую информацию, пожалуйста, проверьте его, если можете.