css溢出圖片隱藏的實作方法：1、建立一個div為「
...」；2、使用img標籤引入圖片；3、透過為img新增屬性為「.img-box{width: 400px; overflow: hidden;background-color:teal;}」即可。
本教學操作環境：Windows10系統、CSS3版、DELL G3電腦
css溢位圖片隱藏怎麼實現？
CSS實作圖片或文字溢出隱藏效果
效果圖：單行溢出隱藏
.nameBox {
// 文字不允许换行（单行文本）
white-space: nowrap;
// 溢出部分隐藏
overflow: hidden;
// 文本溢出后，使用 ... 代替
text-overflow: ellipsis;
margin-right: 3px;
}圖片內容放大框架不變（溢出隱藏overflow：hidden）
<div>
<img alt="css溢出圖片隱藏怎麼實現" >
</div>
<style>
.img-box{
width: 400px;
overflow: hidden;/*最主要的是这个 hidden是溢出隐藏，将溢出部分显示出来：overflow：visible*/
background-color:teal;
}
img{
display: block;
width:100%;
animation: a1 4s linear infinite alternate;
}
@keyframes a1{
100%{
transform: scale(1.5);
}
}
</style>推薦學習：《css影片教學》
以上是css溢出圖片隱藏怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
