html - 如何使我的 CSS 类适合我的图像大小？

Question

嗨，我有image这个尺寸：

   <div class="listRowA"  onmouseover="this.className='listRowAHover'"  onmouseout="this.className='listRowA'"> 


             <div class="listPageCol"  onclick="location.href='../Home/ControlPanel'">
                  <span class="listCol1">

                 <br />
                  @Model[i].ID
                   </span>
                 <span class="Col2"><img src="../Content/Images/20_thumb.jpg" width="281" height="200" border="0" alt="image"  /></span>


         </div>
         </div>

我有这个我正在应用的 CSS 样式image：

.listRowA {
    border: 1px solid #fff; 
}

.listRowAHover { 
    background-color: #F4E4E4; 
    border: 1px solid #fff; 
}

我的悬停风格：

   .listPageCol {
padding:5px; 
margin-right:75px; 
cursor:pointer;

   }

我面临的问题是，当我将图像悬停在图像之外时，我也可以看到pointer。background-color那么我该如何解决这个问题以适应我的image？

Answer 1

尝试这个...

<span class="Col2">
<img src="../Content/Images/20_thumb.jpg" width="281" height="auto" border="0"  alt="image"  />

或者

解决方案是将图像作为背景图像，然后将背景大小设置为包含

HTML

<div class='bounding-box'>

CSS

.bounding-box {


 background-image: url(...);


background-repeat: no-repeat;


 background-size: contain;
}