バナー画像に関して(Dawn)

[r000016]

お世話になっております。

テーマはDawn(バージョン15.2.0)使用しています。

画像バナーですが、3000px以上の画像を使用してもPCの表示の際、画像が荒く表示されてしまいます。
（スマホは鮮明に表示されます）

この場合どのように対応したらよいでしょうか。

カスタムCSSで下記を入れても解決しません。
@media screen and (min-width: 750px) {
.banner--large {
max-width: 1400px;
margin: 0 auto;
}
}


お手数ですがご確認よろしくお願いします。

[Qcoltd]

@r000016様

ご質問いただいている、画像が荒く見える件ですが、Dawnテーマの画像バナーに元々備わっている、

画像サイズを調整する部分が原因かと思われます。

テーマファイルのimage-banner.liquidを編集することが可能でしたら、

画像ファイルを直接表示するように調整することで対応も可能かと思われます。

ご参考まで。

（キュー小坂）

[r000016]

コメントありがとうございます。

image-banner.liquid
下記のminとmaxの部分を大きなサイズに変更すれば問題ないでしょうか。
お手数ですがご確認よろしくお願いします。

{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}

@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}

[Qcoltd · Accepted solution]

@r000016様

ご記載いただいたきました箇所は「画像のアスペクト比を維持しつつ、レスピン支部に高さを調整」する箇所のため、画像表示の部分とは異なります。

画像を表示している対象箇所はDawn15.3.0のデフォルト状態で、「image-banner.liquid」の73行目から83行目の

{{
        section.settings.image
        | image_url: width: 3840
        | image_tag:
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: widths,
          fetchpriority: fetch_priority
      }}

を

<img src="{{ section.settings.image | image_url }}" width="{{ section.settings.image.width }}" height="{{ section.settings.image.height }}">

に変更。

105行目から115行目の

{{
        section.settings.image_2
        | image_url: width: 3840
        | image_tag:
          width: section.settings.image_2.width,
          height: image_height_2,
          class: image_class_2,
          sizes: sizes,
          widths: widths,
          fetchpriority: fetch_priority
      }}

を

<img src="{{ section.settings.image_2 | image_url }}" width="{{ section.settings.image_2.width }}" height="{{ section.settings.image_2.height }}">

に変更いただければ、画像の滲みは解消されるかと思います。

ご参考まで。

（キュー小坂）