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

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

1 个答案: