尽管分配了百分比宽度，IMG 仍会生成滚动条答案

【问题标题】：IMG generates scrollbars despite percentual width assignments尽管分配了百分比宽度，IMG 仍会生成滚动条
【发布时间】：2018-06-04 13:19:38
【问题描述】：

在How is padding calculated when using percentage (%)? 中声明，padding 是根据父母的宽度计算的。

我现在有以下作业 CSS-Code

.img_tutorial_full_width
{
    background-color : #3E3E42;

    margin           : 0;
    border           : 0;
    padding          : 1%;

    width            : 99%;
}

当应用到这样的<img>-Tag 时，我希望：

<img class="img_tutorial_full_width" src="../img/example.jpg"></img>

在整个宽度上拉伸容器，因为

margin=border := 0 + padding := 1% + content := 99% = 100%

但是，浏览器会显示滚动条，滚动条会随着窗口越宽而增加。概念错误在哪里？

【问题讨论】：

img 是一个自闭合标签，适合初学者。您可以使用<img src=""> 或<img src="" />。
@TiesonT。感谢您的评论。不幸的是，更改代码并没有改变外观

标签： html css

【解决方案1】：

默认情况下，图像是内联元素。内联元素忽略高度和宽度属性。只需将display: block; 或display: inline-block 添加到.img_tutorial_full_width 类，它应该可以正常工作。

另外请注意，padding-top、padding-bottom、margin-top 和 margin-bottom 可以应用，但这些对内联元素没有影响。详细解释可以read this article

【讨论】：

感谢您的努力。这都是真的，但不是问题的解决方案

【解决方案2】：

总宽度为 100%。 padding: 1%; 左边占 1%，右边占 1%，所以一共占 2%

.img_tutorial_full_width
{
    background-color : #3E3E42;

    margin           : 0;
    border           : 0;
    padding          : 1%;

    width            : 98%;
}

有效，因为98% + 2 * 1% = 100%

【讨论】：