#html #css #ruby-on-rails #bootstrap-4
#HTML #css #ruby-on-rails #bootstrap-4
Вопрос:
может кто-нибудь объяснить мне, что я должен сделать, чтобы исправить это? Я разместил это в post.rb
has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" }
validates_attachment_content_type :image, content_type: /Aimage/.*z/
затем в моем index.html.erb я получил это
<div class="row">
<% @posts.each do |post| %>
<div class="col-md-4">
<div class="card mb-4 shadow-sm ">
<img class="bd-placeholder-img card-img-top img-fluid " ><%= image_tag post.image.url(:medium) %></img>
<div class="card-body">
<p class="card-text"><h3><%= post.title %> </h3> <%= post.body %></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<%= link_to "View", post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
<%= link_to "Edit", edit_post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<% end %>
</div>
Когда я загружаю разные изображения, он не изменяет их размер должным образом: посмотрите на это: https://iv.pl/image/resize-ruby.Gt21xMz
Я использую paperclip и Magick для загрузки изображений.
Ответ №1:
Я проверил документы для скрепки, и кажется, что 300x300>
и 100x100>
являются директивами, переданными ImageMagick.
https://www.imagemagick.org/script/command-line-processing.php#geometry говорит, что 300x300>
это уменьшит изображение так, чтобы оно помещалось в пределах 300×300. Это означает, что если у вас есть изображение размером 500×300, оно уменьшится до 300×180.
{ medium: "300x300>", thumb: "100x100>" }
похоже, строка кода для изменения, чтобы изменить размер.
Изображение, которое отображается правильно, вероятно, близко к квадратному в его первоначальной форме. Изображение, которое этого не делает, вероятно, представляет собой широкий прямоугольник.
Комментарии:
1. Итак, я должен указать более высокое разрешение, например, has_attached_file:image, styles: {medium: «400×225>»} Я думаю, это работает.
2. Чего вы хотите? Если вы хотите квадратные изображения,
300x300#
сделайте их квадратными (но искаженными). Если вы хотите, чтобы ваши карты макета были выровнены, то с изменением размера все в порядке. Вам нужно настроить код представления (CSS или HTML) так, чтобы контейнеры изображенийmin-height: 300px
были.