在固定大小的容器中缩放图像时保持填充 [英] Maintain padding when scaling image inside fixed size container

问题描述

我试图通过使用CSS transition在悬停时在固定大小的容器内生成图像来创建缩放效果。容器框架有一个边框和填充，我希望他们留下来，当图像增长。问题是，当它增长时，右侧和底部的填充部分消失。

这里是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> 
  

当图片尺寸改变时，是否有任何方法来维持图片周围的10像素？ / p>

解决方案

我已经转移到帧的过渡（当帧被徘徊时，转换开始）。

工作小提琴

HTML：（添加了另一个div）

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

CSS

< pre class =lang-css prettyprint-override> .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：hver img
{
width：300px;
height：168px;
}


I'm trying to create a zoom effect by using CSS transition to grow an image inside a fixed size container on hover. The container frame has a border and padding, and I would like them to stay when the image grows. The problem is that when it grows, the padding on the right and bottom disappear.

Here is the CSS code:

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

And here the HTML code:

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

Is there any way to maintain the 10px padding all the way around the image when it changes size?

解决方案

I've transfered the transition to the frame (when the frame gets hovered, the transition kicks in).

Working Fiddle

HTML: (another div added)

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

这篇关于在固定大小的容器中缩放图像时保持填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！