画像ブロックの右サイドバーの画像の寸法について

  • 解決済 tocchimechin

    (@wakaranchin)


    4年、 7ヶ月前

    WordPress5.3以降

    画像ブロックで画像を適用し、サイズを変更する方法がいくつかありますが、そのうちの
    画像ブロックの右サイドバーの「画像の寸法」の箇所「幅・高さ」に数値を入力する場合、縦横比関係なく入力可能なようですが、imgタグの属性 width height の数値は変わりますが、適用しているCSSによっては思い通りのサイズになりません。

    「スライダーでサイズを変更した場合」「％で４つから選んだ場合」には、max-width が適用されるらしくこの場合は画像のサイズを変更できますが、数値入力では変わりませんでした。

    おそらく独自CSSでmax-width : 100% を適用している為ですが、外すと他にも影響が出ますので、数値入力でもmax-width（max-height）が記述されるよう変更をお願いできますと幸いです。

    バグではないかもしれませんが書かせていただきました。
    宜しくお願いします。

    ※ブラウザにもよるのか私の勘違いかもしれませんが、max-width を指定した場合、属性値を超える事はなかったように記憶していたのですが、本来の画像のサイズを取得するようブラウザそのものの仕様も変わったような気がしてます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 천궁 메텔

    (@digitmaetel)

    4年、 7ヶ月前

    :not() を使うことで適応外になりませんか

    トピック投稿者 tocchimechin

    (@wakaranchin)

    4年、 7ヶ月前

    메텔様

    ご返信誠にありがとうございます。
    別件でもお世話になり感謝申し上げます。

    :not() を適用するのが難しいケースもあるので他の方法は無いか簡単に検証を行った結果、この件に関しても解決しましたのでご報告申し上げます。
    ※検証はやはり大事ですね。

    結論から言うと「画像に対して width : auto のスタイルがあるとサイズが変わらない」事が解りました。

    ▼サイズ変更できない場合
    img {
    width : auto;
    height : auto;
    max-width : 100%;
    }

    ▼サイズ変更できる場合
    img {
    max-width : 100%;
    }

    レスポンシブWEBデザインにてスマホ対応しはじめた頃 width : 100% 及び height : auto を画像に対するスタイルとして記述していました。
    この場合ですと親要素のサイズによっては画像本来のサイズよりも大きく表示される場合があります。

    そこで width : 100% を止め max-width : 100% にする事で本来の画像の最大横幅を越える事は無くなります。
    この時おまじない的に width : auto を併記していました。

    width : auto があっても困らないケースもありますが、今回のように属性値の変更によって画像のサイズを変更する場合には邪魔になってしまうのですね・・・。
    ※heightの場合も同様に height : auto が入っていると変わりません。
    ※max-width : 100%が入っていても画像本来の最大値を超えて指定したサイズ（属性値）の幅になります。

    他の方はあまりご経験がない疑問だったかと思います。
    お騒がせしました事お詫び申し上げます。
    また、ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「画像ブロックの右サイドバーの画像の寸法について」には新たに返信することはできません。