Railsで画像の一部を表示する

Question

いつもお世話になります。

現在Railsでwebページを作成しております。
スマートフォンで撮影した画像を表示したいのですが、縦横どちらでも対応できるようにサムネイル自体は正方形で表示して、クリックすると全体が表示されるという形にしたいと考えております。
クリック時の全体表示はlightboxプラグインを用いてできました。

ここからが質問なのですが、縦横の長さが違う画像の場合、サムネイルを左上から限界まで正方形にして表示するにはどのようにすればよいのでしょうか（以下の画像ようなイメージです）。

現状は以下のように画像を表示しており、縦横比関係なくこのサイズに収めるため、画像が歪んでしまうのです。

初歩的な質問で申し訳ございませんが
ご教示のほどお願いいたします。

追記
コードと状況を追記しました

show.html.erb


        <% post[:post_image].each do |pic| %>
          <div class="post_image_pic">
           <%= link_to (image_tag "/uploads/#{params[:xxxx}/#{pic}", :size => 380, :style => "border:solid 2px #aaaaaa"),
                        "/uploads/#{params[:xxxx]}/#{pic}",  :'data-lightbox' => "abc" %>
　         <%= link_to (image_tag ("buy.png"), :width => "150"), "/#{params[:xxxx]}/buy}" %>
          </div>
        <% end %>




CSS

.post_image_pic {
  width: 380px;
  margin: 0 8px 24px 0;
  display: inline-block;
  vertical-align: top;
}

Answer 1

意図した結果となっているかは判りませんが, img要素にobject-fit: coverとobject-position: 0 0を指定したら如何でしょう.

img{
	/*画像の表示サイズ*/
	width: 200px;
	height: 200px;
	/*画像表示の仕方*/
	object-fit: cover;
	/*画像表樹の基準*/
	object-position: 0 0;
}

参考:
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
https://developer.mozilla.org/ja/docs/Web/CSS/object-position

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。
御教示いただいた方法で解決することができました。
また、何かありました際にご教示いただけますと幸いです。

Answer 2

画像が縦長か横長かが Ruby コードで判定できると仮定します。

img 要素を用いず，div か何かの background-image に当該画像を表示することとします。

<div class="photo-thumbnail" style="background-image: url(<%= image_path(...) %>)"></div>

という感じでしょうか。そして，スタイルシートでまず

.photo-thumbnail {
  overflow: hidden;
}

としておき，さらに追加で

.photo-thumbnail--portrait {
  background-size: 100% auto;
}

.photo-thumbnail--landscape {
  background-size: auto 100%;
}

というクラスも定義します。

そして，さきほどの ERB コードには書いてませんが，画像が縦長か横長かで div に上記の追加のクラスをつけてやります。

もっと素直な方法もあるかもしれませんが，とりあえず思いついたものを書きました。

コードは試してないので，もし間違っていたらすみません。うまくいかなかったら教えてください。

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。
返信が遅くなり大変申し訳ございません。

現在、追記したようにコードと画像を並べており、画像A〇に関してのみ適用したいと考えております。
画像のように並べたいので、background-imageで当てはめるという方法以外でご教示いただけないでしょうか。情報の提示が遅くなりほんとうに申し訳ございません。

何か方法をご存じあれば、ご教示いただけますと幸いです。
よろしくお願いいたします。

[scivola]

A 系列にのみ適用したい，ということですよね。
なぜ background-image がダメだと思ったのですか？

[lyzmfeqpxs54]

早速のご返答ありがとうございます。

現在、追記したようにコードを書いており、divで書いた場合に同じように、表示することが難しいと考えてしまったためです。

[scivola]

link_to を使っているから div が書けない，ということでしょうか？
link_to はブロック付きで使うこともできて，
<%= link_to "/uploads/#{params[:xxxx]}/#{pic}", :'data-lightbox' => "abc" do %>
<!-- このブロックの中に件の div 要素を書く -->
<% end %>
のようにすれば中身を自由にできます。

[lyzmfeqpxs54]

ご回答ありがとうございます。

defghi1977様の方法でやりたいこと自体はできましたが、scivola様にご教示いただいたやり方も勉強のためにやってみたいと思います。
また何かありました際にお力添えをいただければと思います。

度々のご回答ありがとうございました。