LoginSignup
@makiyoshiya076

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

画像を差し替えても画像幅に変化が起きない

Q&A

HTMLCSSWordPress

解決したいこと

ホームページの
画像を差し替えて元画像より横幅を広げたい。

発生している問題・エラー

 <picture>
          <source media="(min-width: 950px)" srcset="<?php echo get_template_directory_uri() ?>/img/cta-2-pc.webp" />
          <img src="<?php echo get_template_directory_uri() ?>/img/custom-btns/sp.frameset.png" alt="タイトル" />
        </picture>

img/新しい画像のファイル名
と変更をかけると横幅は元画像と変わらない。スクリーンショット 2025-04-21 7.10.17.png


または、問題・エラーが起きている画像をここにドラッグアンドドロップ

### 該当するソースコード
```HAML
<picture>
          <source media="(min-width: 950px)" srcset="<?php echo get_template_directory_uri() ?>/img/cta-2-pc.webp" />
          <img src="<?php echo get_template_directory_uri() ?>/img/custom-btns/sp.frameset.png" alt="タイトル" />
        </picture>


### 自分で試したこと
<source media="(min-width: 950px)" srcset="<?php echo get_template_directory_uri() ?>/img/cta-2-pc.webp" />

img/新しい画像のファイル名
に変更をかける
0 likes

2Answer

YottyPG
@YottyPG

media属性により画像を切り替えてみましたが、元の画像サイズが保たれたままでした。
開発者ツールで、なにかサイズに影響されるようなスタイルが反映されていないか確認してみましたでしょうか？

See the Pen https://qiita.com/makiyoshiya076/questions/63fa980cd63c3f49d0e2 by yotty (@yotty) on CodePen.

See the Pen https://qiita.com/makiyoshiya076/questions/63fa980cd63c3f49d0e2 by yotty (@yotty) on CodePen.

2Like

Comments

  1. @makiyoshiya076

    Questioner

    class名cta__titleにwidthが指定されており、これが画像の幅を決めていました。
    この数値を変えることで好きな幅に設定できることがわかりました。
    ご確認ありがとうございました。

  2. @YottyPG

    解決したようでよかったです:qiitan:
    クローズへの変更をお忘れずにお願いいたします。

SurferOnWww
@SurferOnWww

使用ブラウザが何かを書きましょう

srcset="<?php echo get_template_directory_uri() ?>/img/cta-2-pc.webp" とかではなくて、それからレンダリングされた html ソースを書きましょう

1Like

Comments

  1. @makiyoshiya076

    Questioner

    使っているブラウザはChrome
    htmlソース

        <picture>
      <source media="(min-width: 950px)" /wp-content/themes/ihinakiyaseiri/img/cta-2.webp">
      <img src="/wp-content/themes/ihinakiyaseiri/img/cta-2.webp" alt="タイトル" />
    </picture>

    こちらでよろしいでしょうか？
    検証画面で画像の左右にmarginがかかっているのが見えますが、親要素を辿ってもどれがしているか特定できない状況です。

  2. @SurferOnWww

    srcset=" はどこへ行ってしまったんですか？

    /wp-content/themes/ihinakiyaseiri/img/cta-2.webp" は srcset="/wp-content/themes/ihinakiyaseiri/img/cta-2.webp" の間違い？　だとして、そのコードの何をどうした時にどうなればいいんですか？

    MDN のドキュメント「: 画像要素 - HTML: ハイパーテキストマークアップ言語」を読みましょう。

Your answer might help someone💌

LoginSign Up