CSSでトリミングした画像をレスポンシブに表示させたい

前提・実現したいこと

初めて質問させていただきます
あちこち検索しましたが答えが見つけられず・・・
ご教授いただけましたら幸いです　m（_ _）m

1890 × 400pxの画像を用意し
CSSでトリミングして
945 × 400pxで左半分を表示しています
（あるアクションをフックしてその画像を左から右にアニメーションさせるため）

そのトリミング済み画像をページ上でレスポンシブに表示させたいと思っています

発生している問題・エラーメッセージ

画像を画面の幅に合わせて
表示したいのですが
ページを縮小すると
画像が画面の表示領域からはみ出してしまいます

該当のソースコード

HTML
1<div class="outBox">
2	<div class="inBox" >
3		<img id="mainCategoryImage" src="http://xxxxxxxx/category9.png">
4	</div>
5</div>

CSS
1div.inBox{
2	width:  945px;
3	height: 400px; 
4	position: relative;
5	overflow: hidden !important;
6}
7#mainCategoryImage{
8	max-width:initial;
9	width: auto;
10	height:  400px;
11	position: absolute;
12	top: 0;
13	left: 0;
14	border: 0;
15	transition: 2.5s; /* 後にleftを-945pxにしてアニメーションさせる */
16}

試したこと

親要素のdivタグで囲み（outBox）
子要素（inBox）がそれに合わせて拡大縮小できないかと
width: auto;
height: auto;
overflow: auto;
などやって見ましたがダメでした・・・涙

補足情報（FW/ツールのバージョンなど）

確認はCromeで行なっていますが
対象は最新のブラウザ、モバイルも範囲に入ります

kei344

2020/05/12 08:51

コードに全角記号が混じっていますが、実際のコードも同じでしょうか。

aya.mik

2020/05/12 09:16 編集

申し訳ありません！コピーする際に若干修正したので混入した可能性がありますがコメントの所以外でしょうか？

kei344

2020/05/12 09:19

「“outBox”」「“inBox”」とかの記号が全角ですね。

aya.mik

2020/05/12 13:22

おっしゃる通りです！大変失礼いたしました・・・わかりやすい名前に変更するつもりでうっかり全角で更新してしまいました修正しました

行動規範の内容に同意します

回答2件

まずは、HTMLの全角引用符を半角に修正して、

html
1<div class="outBox">
2  <div class="inBox">
3    <img id="mainCategoryImage" src="https://placehold.jp/1890x400.png">
4  </div>
5</div>

CSSはvwを単位にしてサイズを設定すればどうでしょうか。

css
1body {
2  margin: 0;
3}
4
5div.inBox{
6    width:  100vw;
7    height: 40.4vw; 
8    position: relative;
9    overflow: hidden;
10}
11#mainCategoryImage{
12    max-width:initial;
13    width: 200vw;
14    height:  40.4vw;
15    position: absolute;
16    top: 0;
17    left: 0;
18    border: 0;
19    transition: left 2.5s; /* 後にleftを-945pxにしてアニメーションさせる */
20}

投稿2020/05/12 09:52

hatena19

総合スコア34075

aya.mik

2020/05/13 03:27

本当にありがとうございます！恥ずかしながらvwを知らずとても勉強になりました！！！実装し、拡大縮小も無事実現することができました〜♬ ただ、親要素の拡大縮小との連動がずれてしまい自分の実力では綺麗に制御できず・・・もっと勉強したいと思います検証に時間がかかりお礼が遅くなりましたこと大変申し訳ありませんでした

行動規範の内容に同意します

ベストアンサー

こういう感じでしょうか？
サンプル

css
1div.outBox{
2    overflow: hidden !important;
3    width: 100%;
4}
5div.inBox{
6    width: 200%;
7}
8#mainCategoryImage{
9    width: 100%;
10    transition: 2.5s; /* 後にleftを-945pxにしてアニメーションさせる */
11}
12#mainCategoryImage:hover{
13    margin-left: -50%;
14}