HTML帮助：如何使图像的宽度适合整个容器

我希望横幅图像适合白色容器，而不是越过右侧，但我似乎不能忽略左侧的边距。我已经尝试了我所知道的一切；从最大宽度到将边距设置为0px，但没有任何效果

这是我目前拥有的代码：

<p style="text-align: center;" dir="ltr">
  <img class="aligncenter size-full wp-image-504" title="bannercommunity" 
       src="image.png"
       alt="" width="960" height="140" />
</p>

---

任何帮助都将不胜感激，谢谢

您只需将

宽度：100%

添加到

中即可。请注意，使用浏览器调整图像大小效率低下，因此如果可以，您应该避免使用它，并将图像大小调整为您想要使用的正确大小。

在您的情况下，您需要将style=“display:inline block；”添加到图像的父p标记中。或者，您必须删除此图像的“aligncenter”类中的style=“display:block；”。它们都能解决你的问题

---

---

感谢Nick的建议，我已经在评论中修改了我的答案。

虽然我反对内联样式，但我建议您使用以下内容：

CSS方式

.body .wp-image-504.aligncenter { width: 100% !important; }

屏幕截图

---

删除

宽度

和

高度

值，以这种方式给出样式。

感谢各位的帮助，但我发现通过添加

位置：相对位置；左：-20px；宽度：960px；'

---

在风格领域，我做到了这一点。因此，设置图像相对于容器的位置，然后将图像宽度与容器的宽度相匹配（同时添加负数以使左边距为零）工作正常。

内联块在不同浏览器中有几个怪癖，从图像中删除块设置对该图像没有影响-它也是一个类，可能会重复使用，因此更改它将影响网站的其他部分。在你教别人坏习惯之前，你应该先用firebug等来尝试你的解决方案。实际上，你必须将你的图像包装在一个DIV中，以获得正确的结果。就像这样就行了：这和不一样。嗨，尼克，谢谢你的建议。我在评论中修改了我的答案。为什么要添加更多的标记来更改样式？这是一个更糟糕的习惯。具有不同于的属性。如果您想正确使用“margin:0 auto”（以及其他样式和类），则必须将其应用于标记，而不是标记。可以看出问题已经解决。