Javascript 鼠标悬停时如何集中缩放背景图像？ **HTML** **CSS** .bimage{ 显示器：flex； 边框：2倍纯红； 宽度：100%； 高度：300px； 背景：url（'http://tinyurl.com/orwbgck'); 背景大小：100%； } .bimage:悬停{ 背景大小：120%； } fimage先生{ 宽度：200px； 保证金：自动； }

在这里，我可以放大图像时，鼠标在该图像上。但我需要在不增加div宽度和高度的情况下集中放大图像和动画效果。

---

您可以添加

背景位置：中心

以及

背景大小

.bimage{
显示器：flex；
边框：2倍纯红；
宽度：100%；
高度：300px；
背景：url（'http://tinyurl.com/orwbgck');
背景大小：100%；
过渡：1s全部；
背景位置：中心；
}
.bimage:悬停{
背景大小：200%；
}
fimage先生{
宽度：200px；
保证金：自动；
}

一旦您在父类上设置了

背景位置：居中

，您可以在悬停时跳过它。@MorKadosh我想出来了，后来添加了它现在…）

**HTML**
<div class="bimage">
    <img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>

**CSS**
.bimage {
    display: flex;
    border:2px solid red;
    width:100%;
    height:300px;
    background:url('http://tinyurl.com/orwbgck');
    background-size:100%;
}
.bimage:hover{
        background-size:120%;
}

.fimage {
    width: 200px; 
    margin: auto;  
}