Question

**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;  
}

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

Answer 1

您可以添加background-position:center以及background-size

＆＃13;

.bimage {
    display: flex;
    border:2px solid red;
    width:100%;
	height:300px;
	background:url('http://tinyurl.com/orwbgck');
    background-size:100%;
    transition:1s all;
  background-position:center;
}
.bimage:hover{
		background-size:200%;
    
}

.fimage {
    width: 200px; 
    margin: auto;  
}

＆＃13;

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

＆＃13;

如何在鼠标悬停时集中缩放背景图像？

1 个答案: