Question

我正在尝试通过使用CSS过渡来在悬停时在固定大小的容器内生成图像来创建缩放效果。容器框架有边框和填充，我希望它们在图像增长时保持不变。问题是，当它增长时，右侧和底部的填充消失。

这是CSS代码：

.videoframe {
width: 200px;
height: 113px;
border: solid 2px;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
overflow: hidden;
}

.videoframe img {
border-radius: 20px;
width: 200px;
height: 113px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.videoframe img:hover {
width: 300px;
height: 168px;
overflow: hidden;
}

这里是HTML代码：

<div class="videoframe"> <img src="image.jpg" /> </div>

当图像改变大小时，有没有办法在图像周围保持10px填充？

Answer 1

我已经转移到了帧（当帧被悬停时，过渡开始了）。

Working Fiddle

HTML：（另添加了div）

<div class="videoframe">
    <div>
        <img src="http://www.ac4bf-thewatch.com/initiates/upload/20130909/big_522e1c989c94f.jpg">
    <div>
 </div>

<强> CSS

.videoframe
{
    width: 200px;
    height: 113px;
    border: 2px solid black;
    border-radius: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 10px;
}
.videoframe div
{
    border-radius: 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.videoframe img
{

    width: 100%;
    height: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.videoframe:hover img
{
    width: 300px;
    height: 168px;
}

Answer 2

抱歉，我有点困惑，您是否希望父容器随图像一起展开？

若有，请参阅http://jsfiddle.net/NcaAA/

你可以使用

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

与

padding:10px;

保持一致的填充，考虑到你想要的总宽度和高度。

在固定大小容器内缩放图像时保持填充

2 个答案: