html - 包含比 img 宽的 div

Question

我在包含的 div 中有一个 img 标签，由于某种原因，包含的 div 比 img 标签宽。我使用了带有 % 和 px 的“宽度”，我也尝试过给包含的 div 0 填充以及 0 边距内的 img。我试图让 div 成为 img 标签的确切宽度。

这是html的例子

   <div class="ballOne">
        <img src="assets/fitnessIcon.png" alt="Fitness Icon" />
    </div> 

和CSS

.ballOne{
border: 1px solid blue; 
width: 200px;
float: left;
padding: 0;
}
.ballOne img{
width: 60%;
border: 1px solid green;
margin: 0;
}

边框只是临时显示 div 和 img 的宽度

Answer 1

不使用 div 和 img 的宽度

HTML:

<div class="ballOne">
    <img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg" alt="Fitness Icon" />
</div>

CSS:

.ballOne{
       border: 1px solid blue; 
       float: left;
       padding: 0;
       text-align: center;
       overflow:auto;
  }
 .ballOne img{
       border: 1px solid green;
       margin: 0;
       display: block;
  }

看看这个 FIDDLE

对div使用宽度

HTML:

<div class="ballOne">
        <img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg" alt="Fitness Icon" />
</div> 

CSS:

.ballOne{
   border: 1px solid blue; 
   float: left;
   width:200px; 
   margin:0 auto; 
   padding: 0;
   text-align: center;
   overflow:auto;
}
.ballOne img{
    border: 1px solid green;
    margin: 0;
    width:99%;
    display: block;
}

检查这个修改过的 FIDDLE