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

Question

我希望横幅图像适合白色容器而不是向右侧移动，但我似乎无法忽略左边的边距。我已经尝试了所有我知道的;从最大宽度到将边距设置为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>

感谢任何和所有帮助，谢谢！

Answer 1

您只需将width: 100%添加到<img>即可。请注意，让浏览器调整图像大小效率很低，因此如果可以的话，应该避免使用它，并将图像调整为您想要使用的正确大小。

Answer 2

虽然我反对内联样式，但我建议你这样做：

CSS Way

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

<强>截图

删除width和height值，以这种方式提供样式。

Answer 3

感谢帮助人员，但我发现通过添加

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

样式字段中的

为我做了诀窍。因此，设置图像相对于容器的位置，然后将图像宽度与容器的宽度相匹配（同时添加减号以使左边距无效）。

Answer 4

在您的情况下，您需要添加style =“display：inline-block;”到图像的父P标签。或者你必须删除style =“display：block;”在此图像的“aligncenter”类中。它们都可以解决您的问题。

---

感谢尼克的建议，我在评论中修改了我的答案。