object-fit: cover;でトリミングが適応されない写真がある

Question

###知りたいこと
object-fit: cover;でトリミングが適応されない写真があるため、その原因と解決方法を知りたいです
まず三つの縦長写真があります。（全て縦長です）

しかし、唯一2.jpgだけ、object-fit: cover;でうまくトリミングされません。
以下のように、2.jpgの一枚だけ縦がトリミングされずめいいっぱい表示されるが、サイズに収めるために、ぎゅっと縮小する感じになっています。
一方で、他の写真は横が基準となり、横がめいいっぱい表示され、縦の綺麗にトリミングされます。

・同じ縦長サイズ写真なのに、なぜこのような違いが起きるのでしょうか？
また、この現象がiPhoneでは綺麗にトリミングされますが、PCとアンドロイド携帯にて発生します。

<div class="post-left">
  <img src="/2.jpg">
</div>
<div class="post-left">
  <img src="/3.jpg">
</div>
<div class="post-left">
  <img src="/4.jpg">
</div>

.post-left {
  float: left;
}
.post-left img {
  width: 170px;
  height: 110px;
  border-radius: 5%;
  box-shadow: 0 2px 6px #c1ced7;
  object-fit: cover;
}

ぜひアドバイス宜しくお願い致します。
###追記2
以下のように、background-imageとして表示すると、無事トリミングされ、表示することができました。

<div class="post-left image1"></div>
<div class="post-left"><img src="/3.jpg"></div>
<div class="post-left"><img src="/4.jpg"></div>

#追加
.image1 {
  width: 170px;
  height: 110px;
  border-radius: 5%;
  background-image:url(/2.jpg);
  background-size:cover;
}

しかし、以下のようにRubyのeachメソッドで繰り返した場合、background-imageからurlの取得は厳しかったです。

<% @posts.each do |post| %>
  <div class="post-left">
    <%= image_tag post.image_name.url %>
  </div>
<% end %>

def index
  @posts = Post.all
end

上記のような状況で、画像のトリミングがうまく行かない場合の方法についてアドバイスを頂ければ幸いです。

Answer 1

特定の画像だけに症状がでるとは興味深い現象ですね。

CSSの方で背景画像を設定した場合はどうなりますか。

<div class="post-left image1">
</div>

.post-left {
  float: left;
  width: 170px;
  height: 110px;
  border-radius: 5%;
  box-shadow: 0 2px 6px #c1ced7;
}
.image1 {
  background-image:url(/2.jpg);
  background-size:cover;
}

追記

object-fit は比較的新しく実装されたものなので、ブラウザによって完全対応できていない部分があるのかもしれませんね。（IEは非対応ですし）

rubyに関しては分からないのですが、HTMLの方にインラインスタイルで埋め込めば対応できませんか。

<div class="post-left" style="background-image:url(/2.jpg);">
</div>

Comments

[tomtom1]

ご回答ありがとうございます！アドバイス通り、うまく行きました！
しかしながら、実はrubyのeachメソッド（取得したデータを繰り返しさせる）で各写真を表示しておりますため、background-imageの起用は難しいと感じました。
（rubyで分かりにくくするより、簡単にご質問した方が宜しいかと感じましたが、裏目に出てしまいました。後からの状況追加になり申し訳ありません）
もし、何かお気づきな点などございましたらご教示頂ければ幸いです。

[hatena19]

回答に追記しましたので参照ください。