Question

我在包含div的内部有一个img标签，由于某种原因，包含的div比img标签宽。我使用了“width”和％以及px，我也试过给出包含div 0填充以及img里面的0边距。我试图让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

将width用于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

Answer 2

我认为我修复了你的CSS：

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

Answer 3

ballOne作为width:200px;的容器，内部带width:60%;的图像，图像将是容器宽度的60％。因此图像将是200px或~120px的60％。

如果您希望宽度相同，请在px中将它们设置为相同的宽度。

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

Answer 4

容器比图像宽的原因是因为您为容器设置了一个定义的，在本例中为200px，然后将img标签的样式设置为其容器宽度的60％。换句话说，你的img标签的宽度是200px的60％。

你可以尝试这样的事情：

.ballOne{
border: 1px solid blue;
width: 200px;    /* alternatively, you could not set the width of the container at all */
float: left;
padding: 0; 
}
.ballOne img{
max-width: 100%;    /* this allows the img tag to be the full size of its container */
border: 1px solid green;
margin: 0;
}

Answer 5

正如您所说<div>大于<img>，因为您制作了<img> width to 60% 因此图像宽度仅覆盖60％，其余40％将为空白

答案

如此简单的添加图片 width:100%

＆＃13;

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

＆＃13;

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

＆＃13;

包含比img更宽的div

5 个答案:

答案