background-image:containを使っているが、画質が悪くなっている状態です。

Question

今現在、画像にbackground-image:cover;を使い、画質を良くしようと試みているのですが、画質が悪い状態のままになっています。もしわかる方がいらしたら、教えていただきたいです。

class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  #画像形式を変更するのに必要
  include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end
  #画像をリサイズする
  process :resize_to_limit => [300, 300]
  
  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end
  #保存形式をJGにする
  process :convert => 'jpg'
  # Create different versions of your uploaded files:
  #サムネイルを生成する設定
  version :thumb do
     process :resize_to_limit => [300, 300]
  end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  #これらからしか保存できない
  def extension_whitelist
     %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  #ファイルをコンパイルする
  def filename
     super.chomp(File.extname(super))+'jpg' if original_filename.present?
  end
end

<div class= "headquarter">
 <div class= "image-all">
  <div class="image-five ">
   <div class="image-parts">
    <div class="main">
     <img src="<%= @plan.image %>" id="target" style="width: 725px; max-width: 100%; height: 460px; background-image: cover; ">
    </div>
    <div class="king">
     <ul class="example">
         <li class="current"><img src="<%= @plan.image %>" alt="写真1" style=" width: 360px; height: 230px;  background-image: cover;"></li>
         <li><img src="<%= @plan.second_image %>" alt="写真2" style="width: 360px; height: 230px;  background-image: cover;"></li>
         <li><img src="<%= @plan.third_image %>" alt="写真3" style="width: 360px; height: 230px;  background-image: cover;"></li>
         <li><img src="<%= @plan.fourth_image %>" alt="写真4" style="width: 360px; height: 230px;  background-image: cover;"></li>
        
        
     </ul>
    </div>

    <script src="javascripts/main.js"></script>
    <script>
    var files = [
    '<%= @plan.image %>',
    '<%= @plan.second_image %>',
    '<%= @plan.third_image %>',
    '<%= @plan.fourth_image %>',
    '<%= @plan.five_image %>'
  ];
    </script>
   </div>
  </div>
 </div>

Comments

[yoshinavi]

画像は少しでも引き延ばされたり、拡大されると、画質が悪くなります。
表示したいサイズと、用意している画像サイズが合っていないのでは？

[avicii]

画像の解像度や圧縮率を変えても、画質を変えることができないのでしょうか？

[yoshinavi]

状況が今一つ理解出来ていないので、的外れかも知れないですが…

用意した画像そのものが画質が悪いモノを、HTMLやCSSで高画質には出来ません。

画質を落とさないように解像度は「高」→「低」の一方向のみだけです。

例）
「1000×500」→「500×250」に変換=画質は維持

「500×250」→「1000×500」に変換=画質は低下

[avicii]

ありがとうございます。

Answer 1

background-image: cover;は画質を良くするためのCSSプロパティではないです。
画質を良くしたい場合、画像の解像度や画質の圧縮率などを変更してください。

Comments

[avicii]

元々の画像のサイズがバラバラでも、画像の解像度や画質の圧縮率を変えれば、画質がいい状態にすることは可能でしょうか？度々申し訳ございません。圧縮や解像を試みてはいるのですが、なかなか画質が良くならない状態になっています。