Html 将段落中的图像与祖父母div的宽度匹配

我觉得这应该很容易，但我已经玩了很长时间，还没有取得任何进展

我有一个div，其中的图像设置为宽度：100%。这正如您所期望的那样，图像在div中边对边显示

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

我想要的是，这些段落中的图像也显示在div的全宽处（而不是段落，因为填充的缘故，段落更窄）。但是，我确实需要保留填充，因为我需要它或文本

HTML（无法更改）：

我已经尝试过在图像中添加一个负边距（使用下面的CSS），这样可以使图像达到边缘，但我无法准确地使其与div的宽度相同

CSS:

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

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

---

您可以做的一件事是使用css

calc

属性。请尝试下面的代码。请记住，

calc

在一些旧浏览器中不起作用

小提琴：

html

---

谢谢你。不幸的是，它不能满足我的要求。我可能应该更清楚，但我不能更改HTML-如果我可以这样做，我只会将img放在p标记之外。情况是，这是一个Joomla模板，我需要作者能够轻松地添加自己的图像。试试这个：如果这对你有效，那么我会更新我的答案。但是我建议找到一种改变html的方法。这个标记将很难维护，因为它工作得很好，谢谢Abdul！如果你在回答中加上这个，我会打勾：）

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

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

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