<p>我正在开发一个网站，当您将鼠标悬停在图像上时，它会缩小，以便您可以看到整个图像，而无需缩小太多以查看 div 的背景。</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 Cessna c172 HA-SJX (G1000)</p>
<a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)">Download</a>
</div>
</pre>
<p>还有我的 CSS：</p>
<pre class="brush:css;toolbar:false;">:root {
--img-size: 350px;
--button-margin: 20px;
--dark-blue: #070b21;
--blue: #10184a;
--light-blue: #00d1ff;
}
div#wrapper {
position: relative;
margin: auto;
margin-bottom: 100px;
background-color: var(--dark-blue);
width: var(--img-size);
}
div#imgDiv {
position: relative;
text-align: center;
color: red;
padding: 0;
margin: 0;
background-color: var(--dark-blue);
overflow: hidden;
height: var(--img-size);
}
div#imgDiv div#transitionDiv {
background-position-x: 50%;
height: 100%;
width: 100%;
background-size: auto var(--img-size);
background-repeat: no-repeat;
-webkit-transition: background-size 1500ms ease;
-moz-transition: background-size 1500 ease;
-o-transition: background-size 1500 ease;
-ms-transition: background-size 1500ms ease;
transition: background-size 1500ms ease;
}
div#imgDiv:hover div#transitionDiv {
background-position-y: 50%;
background-size: var(--img-size) auto;
}
p#title {
overflow: hidden;
height: 38px;
margin: 30px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
div#designs div a {
display: block;
text-align: center;
text-decoration: none;
background-color: var(--light-blue);
color: white;
font-size: 40px;
font-family: "Montserrat", sans-serif;
margin: var(--button-margin);
padding: 0px;
width: calc(100% - 2 * var(--button-margin));
border-radius: 15px;
transition: 0.5s;
}
div#designs div a#no-link {
background-color: grey;
}
div#designs div a:hover {
background-color: dodgerblue; /* using random color for now */
}
div#designs div a:active {
background-color: blue; /* using random color for now */
}
</pre>
<p>我尝试寻找解决方案，他们都说按照我的方式去做。这会将背景图像缩放到正确的大小，但过渡不起作用。</p>
<p>我还尝试更改 div，使其在 div 内有一个图像标签，但这也不起作用。</p>
1
1057
收藏
事实证明，过渡不适用于自动和其他一些属性（覆盖、包含、继承、初始、未设置）。我找到的解决方案是使用 JavaScript 使用以下代码：
img.onload = function () { let height = img.naturalHeight; let width = img.naturalWidth; let ratio = height / width; img.surroundingDiv.bgSize = "" + ((1 / ratio) * 100) + "%"; img.surroundingDiv.style.backgroundSize = this.surroundingDiv.bgSize; }; transitionDiv.style.backgroundImage = "url(" + img.src + ")"; transitionDiv.onmouseenter = function () { this.style.backgroundSize = 100 + "%"; }; transitionDiv.onmouseleave = function () { this.style.backgroundSize = this.bgSize; };首先，我计算比率，以计算出当图像未悬停在其上方时要缩放图像多少。我必须通过在
div中创建一个新属性bgSize并将其存储在那里，来存储要在onmouseleave事件中使用的该值。然后，我使用
onmouseenter和onmouseleave事件来更改悬停在图像上时的图像大小。我还删除了 css 文件中的
:hover选择器，因为它现在已过时。