在縮放固定大小容器內的圖像時維護填充

我試圖通過使用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的填充，當它改變大小的圖像周圍所有的方式？

來源

2013-09-16 zylch

如果你把填充放在img上怎麼辦？ –

這是行不通的，因爲圖像延伸了填充，所以右側和底側消失。 – zylch

我已經轉移到框架的過渡（當框架被徘徊時，轉換開始）。

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

來源

2013-09-16 18:18:48 avrahamcool

與Shalom Aptekar的代碼相同，此處父容器隨圖像展開，我想避免這種情況。父容器需要保持相同的大小，同時圖像隨着溢出被隱藏而擴展，所以我們最終只能看到圖像的左上角部分。 – zylch

其實..他貼了他的解決方案後，我..但沒關係。我更新了我的解決方案。 – avrahamcool

對不起，是的，框架現在保持相同的大小，但問題仍然存在：當圖像增長時，右側和底部的填充消失... – zylch

對不起，我有點糊塗了，你要的父容器隨着形象展開？

如果是這樣，請參閱http://jsfiddle.net/NcaAA/

可以使用

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

與

padding:10px;

保持一致的填充，考慮到總寬度和高度你想要的。

來源

2013-09-16 18:21:21

我希望父容器保持其固定大小，同時內部圖像展開，給人以視頻縮放的印象。我認爲你的建議是擴大容器？ – zylch

哦，好吧！我會這樣做，它可能會更容易。 http://jsfiddle.net/NcaAA/ –

嗯，除非我弄錯了，容器仍然會隨着圖像的增長而增長。 – zylch

在縮放固定大小容器內的圖像時維護填充

回答

相關問題