html - 为什么图片会被 CSS 覆盖？

Question

我将图像放入以下 ​​wordpress 网站：

http://sofrahomemadefood.com/menu/

图很大。因此，它在其容器上运行。它被下一个区域覆盖，如下图所示：

我想了解这是什么原因以及如何防止图像被掩盖？

Answer 1

原因是这段 html：

<img class="alignnone" title="Menu" src="http://i.imgur.com/OKRf1h.jpg" alt="" width="1024" height="663">

（这是嵌入的图像，注意宽度和高度属性）

您可以使用以下方法修复它：

img.alignnone{
    width: auto; /*You may want to flag this !important for some browsers*/
    height: auto; /*You may want to flag this !important for some browsers*/
    max-width: 100%;
    max-height: 100%;
}

这是做什么的：

• 图像的自然纵横比通过使用width:auto和height:auto
• max-height:100%通过和防止图像超出其父元素的边界max-width:100%

附带说明：

对于总是希望图像缩放到父级的宽度/高度的人，保留纵横比：您可以使用min-width:100%(for width) 或min-height:100%for height，width:auto并height:auto保留比例。

如果您希望将图像保持在一定大小并让它流出内容区域，您可以overflow:hidden从div.maincontentstyle.css 的第 202 行的选择器中删除。