今天我來給大家分享一下CSS圖片框樣式的教程。相信很多人都需要用到這個樣式，所以就來和大家分享一下這個教程。 首先，我們需要創建一個圖片框的基礎樣式。代碼如下：

.img-box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}

上面的代碼中，我們定義了一個名為“.img-box”的類，設置了寬度、高度、邊框以及圓角等基本樣式。overflow屬性的值設置為“hidden”，是為了讓圖片超出框體的部分被隱藏。

接下來，我們需要為圖片框添加圖片。代碼如下：

.img-box img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

上面的代碼中，我們使用了一個嵌套樣式（“.img-box img”），給圖片添加了寬度、高度以及“object-fit: cover”屬性。這句代碼的作用是讓圖片保持原比例，并且填充滿整個圖片框。

接下來，我們可以為我們的圖片框添加一些hover效果。比如，在鼠標懸停時，讓圖片框產生一些變化。代碼如下：

.img-box:hover img {
transform: scale(1.1);
transition: all .3s ease-in-out;
}

上面的代碼中，我們使用了:hover偽類選擇器，定義了當鼠標懸停在圖片框上時的效果。transform屬性的值為“scale(1.1)”表示放大1.1倍，transition屬性的值為“all .3s ease-in-out”表示過渡效果為0.3秒，呈現出緩慢變化的效果。

這樣，我們就完成了CSS圖片框樣式的制作。以上內容僅供參考，希望對大家的CSS學習有所幫助。