<div class="img">是HTML中的一個常用類名，用于給某個元素添加樣式或操作。在HTML中，<div>是一個容器元素，可以用于組織和布局其他內容，而給這個<div>添加類名"img"則表示這個容器元素被用作包含圖片的容器。通過添加類名"img"，我們可以對這個容器中的圖片進行樣式修改或操作，為網頁設計和開發帶來更大的靈活性。
下面是幾個代碼案例，演示了如何使用<div class="img">來處理圖片的樣式和操作。
案例一：居中顯示圖片 有時候我們希望圖片在容器中居中顯示，可以通過以下代碼實現：

<code><style>
.img {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<br>
<div class="img">
<img src="圖片鏈接" alt="圖片描述">
</div>
</code>

這段代碼中，通過設置容器元素的樣式為"display: flex; justify-content: center; align-items: center;"，可以讓容器內的圖片在水平和垂直方向上都居中顯示。
案例二：邊框效果 有時候我們希望對圖片添加一些邊框效果，可以通過以下代碼實現：

<code><style>
.img {
border: 2px solid red;
padding: 10px;
}
</style>
<br>
<div class="img">
<img src="圖片鏈接" alt="圖片描述">
</div>
</code>

這段代碼中，通過設置容器元素的樣式為"border: 2px solid red;"和"padding: 10px;"，可以給圖片添加一個2像素紅色邊框并設置內邊距為10像素。
案例三：鼠標懸停效果 有時候我們希望當鼠標懸停在圖片上時，能夠出現一些特殊效果，如透明度變化或顯示標題等。可以通過以下代碼實現：

<code><style>
.img {
position: relative;
}
<br>
    .img:hover img {
opacity: 0.5;
}
<br>
    .img:hover:after {
content: '標題';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
}
</style>
<br>
<div class="img">
<img src="圖片鏈接" alt="圖片描述">
</div>
</code>

這段代碼中，通過設置容器元素的樣式為"position: relative;"，以及使用":hover"偽類選擇器和屬性選擇器來實現鼠標懸停效果。當鼠標懸停在圖片上時，圖片的透明度將變為0.5，并且容器后面會出現一個帶有標題的半透明黑色背景。
通過以上幾個代碼案例，我們可以看到<div class="img">可以為我們處理圖片的樣式和操作提供很大的便利性。無論是圖片的布局、邊框效果還是鼠標懸停效果，都可以通過給圖片容器添加類名"img"來快速實現。這使得我們在網頁設計和開發中能夠更加靈活地處理和展示圖片。