画像を縮小しないで横スクロールで表示したい

Question

Wordpressのブロックで挿入した画像を
レスポンシブせずに、ウィンドウが小さい場合は横スクロールで表示したいのですが、うまくいきません。

画像サイズは
5334 x 1888 ピクセル ピクセル

Wordpressブロック内のHTMLは

<figure class="wp-block-image img-size img-scale"><img src="http://localhost:10019/wp-content/uploads/2021/03/sosikizu-1.png" alt="組織図" class="wp-image-573"></figure>

CSSは
.img-size{
max-width: 1200px;
max-height: 500px;
}

.img-scale{
max-width: 800px;
max-height: 800px;
overflow: scroll;

}

画面を小さくすると、画像も一緒に小さくなってしまいます。

また　
.img-scale{
min-width: 80%;
overflow: scroll;

}

というようにしても同様で

画像ブロックに反映せずに全体的に縮小してしまいます。
どのようにすれば解決するのか検討がつきません、御指導頂ければ幸いです、宜しくお願い致します。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、スクロールするようになりました。
つまり、問題が再現しませんでした。

ご提示いただいていない部分に原因があると思われますので、問題が再現するコードをご提示ください。

[nomad246]

えっ！そうなんですね、、、wordpressとの関係が問題でしょうか。。。
もう一度確認してみます！ありがとうございます！

Answer 1

WordpressのブロックないでHTML編集を行いました。

<div class="scroll"><figure class="wp-block-image img-size"><img src="http://localhost＊＊＊＊/wp-content/uploads/2021/03/sosikizu-1-1.png" alt=""></figure></div> <div class="scroll"></div>で囲み

CSSで

.scroll{
overflow-x: scroll;
}

にしたら出来ました！

ありがとうございました！