Ruby styles для изображения не изменяет размер изображений должным образом

#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 были.