###知りたいこと
object-fit: cover;でトリミングが適応されない写真があるため、その原因と解決方法を知りたいです
まず三つの縦長写真があります。(全て縦長です)
しかし、唯一2.jpgだけ、object-fit: cover;でうまくトリミングされません。
以下のように、2.jpgの一枚だけ縦がトリミングされずめいいっぱい表示されるが、サイズに収めるために、ぎゅっと縮小する感じになっています。
一方で、他の写真は横が基準となり、横がめいいっぱい表示され、縦の綺麗にトリミングされます。
・同じ縦長サイズ写真なのに、なぜこのような違いが起きるのでしょうか?
また、この現象がiPhoneでは綺麗にトリミングされますが、PCとアンドロイド携帯にて発生します。
html
1<div class="post-left"> 2 <img src="/2.jpg"> 3</div> 4<div class="post-left"> 5 <img src="/3.jpg"> 6</div> 7<div class="post-left"> 8 <img src="/4.jpg"> 9</div>
css
1.post-left { 2 float: left; 3} 4.post-left img { 5 width: 170px; 6 height: 110px; 7 border-radius: 5%; 8 box-shadow: 0 2px 6px #c1ced7; 9 object-fit: cover; 10}
ぜひアドバイス宜しくお願い致します。
###追記2
以下のように、background-imageとして表示すると、無事トリミングされ、表示することができました。
html
1<div class="post-left image1"></div> 2<div class="post-left"><img src="/3.jpg"></div> 3<div class="post-left"><img src="/4.jpg"></div>
css
1#追加 2.image1 { 3 width: 170px; 4 height: 110px; 5 border-radius: 5%; 6 background-image:url(/2.jpg); 7 background-size:cover; 8}
しかし、以下のようにRubyのeachメソッドで繰り返した場合、background-imageからurlの取得は厳しかったです。
ruby
1<% @posts.each do |post| %> 2 <div class="post-left"> 3 <%= image_tag post.image_name.url %> 4 </div> 5<% end %>
Controller
1def index 2 @posts = Post.all 3end
上記のような状況で、画像のトリミングがうまく行かない場合の方法についてアドバイスを頂ければ幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/12 15:25
2020/08/12 15:41