html - 使段落中的图像适合祖 parent div 的宽度

Question

我觉得这应该很容易，但我已经玩了很长时间了，但一无所获。

我有一个 div，其中的图像设置为 width:100%。正如您所期望的那样工作，图像在 div 内边对边显示。

对于这个 div 内的段落，我有填充。

我想要的是，这些段落内的图像也显示在 div 的整个宽度上(不是段落，由于填充，段落更窄)。但是我确实需要保留填充，因为我需要它或文本。

HTML (无法更改):

<div id="grandparent">
    <img src="whatever" />
    <!-- this next image should be exactly the same width as the first one -->
    <p><img src ="whatever" /> This text still needs to be padded though.</p>
</div>

CSS:

p {
    padding:15px;
}
img {
    width:100%;
}

我曾尝试为图像添加负边距(使用下面的 CSS)，这会使其超出边缘，但我无法准确地使其与 div 的宽度相同。

CSS:

p img {
    /*starts the img in the right place, but doesn't fix the width */
    margin-left:-15px;
    margin-right:-15px;
}

Answer 1

您可以做的一件事是使用 css calc 属性。试试下面的代码。请记住，calc 在某些较旧的浏览器中不起作用。

fiddle :http://jsfiddle.net/q8Lb7t3t/6/

html

<div class='gp'>
    <img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
    <p>
        <img class='img-pad' src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
        text text text text text text text text text text
        text text text text text text text text text text
        text text text textext text text text text text text
    </p>
</div>

CSS

.gp {
    width: 300px;
    background-color: #eee;
}
img {
    display: inline-block;
    width: 100%;
    height: auto;
}
.img-pad {
    margin-left: -20px;
    width: calc(100% + 40px);
}
p {
    padding: 20px;
}