Railsのレスポンシブ画像

アセットパイプラインとimage_pathヘルパーを使用しているときにRailsでレスポンシブ画像を実装する最適な方法は何ですか？Railsのレスポンシブ画像

これはCSSを純粋に使っているので、悲しいことに私にとっては嫌なことです。IEのスケーリングで問題が発生するからです。

2017-12-04 bogjerlow

IEにはどのような問題がありますか？あなたは携帯電話で異なる意見を持っているためにmobyletteの宝石をチェックすることができます。 – Snake

@ Snake IEの問題は、私が使った高解像度の画像が他のブラウザと同様に縮小されず、画像にギザギザのエッジが生じることです。応答可能なイメージを扱うためにsrcsetを使用するつもりでしたが、image_pathを使用する方法を理解できません – bogjerlow

イメージを拡大縮小するためにCSS変換を試しましたか？ https://stackoverflow.com/questions/9945363/image-scaling-causes-poor-quality-in-firefox-internet-explorer-but-not-chrome – Snake

使用carrierwave宝石などのバージョン使用して画像をアップロードする：

class MyUploader < CarrierWave::Uploader::Base 
    include CarrierWave::MiniMagick 

    process resize_to_fit: [800, 800] 

    version :thumb do 
    process resize_to_fill: [200,200] 
    end 

    version :large do 
    process resize_to_fill: [600,600] 
    end 

end

使用異なる画面サイズの異なるバージョンを。

uploader.url # => '/url/to/my_file.png'    # size: 800x800 
uploader.thumb.url # => '/url/to/thumb_my_file.png' # size: 200x200 
uploader.large.url # => '/url/to/large_my_file.png' # size: 600x600

出典

2017-12-04 10:35:02 puneet18

これはアセットパイプラインで処理された画像ではありません – Snake

Railsのレスポンシブ画像

答えて

関連する問題