<p>画像の上にマウスを置くとズームアウトして、div の背景を確認するためにズームアウトしすぎなくても画像全体が表示される Web サイトを開発しています。 </p> <p>私の HTML は次のようになります: </p> <pre class="brush:html;toolbar:false;"><div id="wrapper"> <div id="imgDiv"> <div id="transitionDiv" style="background-image: url("../resources/models/HA-SJX.JPG");"></div> </div> <p id="title">MALEV セスナ c172 HA-SJX (G1000)</p> <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV セスナ c172 HA-SJX (G1000)">ダウンロード</a> </div> </pre> <p>そして私のCSS: </p> <pre class="brush:css;toolbar:false;">:root { --img-size: 350px; --ボタンマージン: 20px; --ダークブルー: #070b21; --青: #10184a; --水色: #00d1ff; } div#wrapper { 位置: 相対的; マージン: 自動; マージン-ボトム: 100ピクセル; 背景色: var(--dark-blue); 幅: var(--img-size); } div#imgDiv { 位置: 相対的; テキスト整列: 中央; 赤色; パディング: 0; マージン: 0; 背景色: var(--dark-blue); オーバーフロー: 非表示; 高さ: var(--img-size); } div#imgDiv div#transitionDiv { 背景位置-x: 50%; 高さ: 100%; 幅: 100%; 背景サイズ: auto var(--img-size); 背景リピート: リピートなし; -webkit-transition: 背景サイズ 1500 ミリ秒の容易さ。 -moz-transition: 背景サイズ 1500 の容易さ; -o-transition: 背景サイズ 1500 の容易さ。 -ms-transition: 背景サイズ 1500 ミリ秒の容易さ。 トランジション: 背景サイズ 1500 ミリ秒の容易さ。 } div#imgDiv:hover div#transitionDiv { 背景位置 y: 50%; 背景サイズ: var(--img-size) 自動; } p#title { オーバーフロー: 非表示; 高さ: 38px; マージン: 30px; 表示: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: 垂直; } div#designs div a { 表示ブロック; テキスト整列: 中央; テキスト装飾: なし。 背景色: var(--light-blue); 色: 白; フォントサイズ: 40px; フォントファミリー: 「モンセラート」、サンセリフ; マージン: var(--button-margin); パディング: 0px; 幅: calc(100% - 2 * var(--button-margin)); 境界半径: 15px; トランジション: 0.5秒; } div#designs div a#no-link { 背景色: グレー; } div#designs div a:hover { 背景色: dodgerblue; /* 現時点ではランダムな色を使用します */ } div#designs div a:active { Background-color: blue; /* 現時点ではランダムな色を使用します */ } </pre> <p>解決策を探してみましたが、どれも私のやり方でやれと言われました。これにより、背景画像が正しいサイズに拡大縮小されますが、トランジションは機能しません。 </p> <p>また、div 内にイメージタグが含まれるように div を変更しようとしましたが、それも機能しませんでした。 </p>