Ruby styles for image doesn't resize pictures properly - html

Question

could someone explain me what should I do to fix this? I put this on post.rb
has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" }
validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
then in my index.html.erb i got this
<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>
When I upload diffrent images then it doesn't resize it properly: look at this: https://iv.pl/image/resize-ruby.Gt21xMz
I use paperclip and Magick to upload images.

Answer 1

I checked through the docs for Paperclip, and it appears that 300x300> and 100x100> are directives passed to ImageMagick.
https://www.imagemagick.org/script/command-line-processing.php#geometry says that 300x300> will shrink the image so that it fits within 300x300. That means if you have a picture that's 500x300, it'll shrink down to 300x180.
{ medium: "300x300>", thumb: "100x100>" } looks like the line of code to modify, to change your resizing.
The picture that renders correctly is probably close to square in its original form. The picture that does not is probably a wide rectangle.