为什么图像会被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%（宽度）或min-height:100%作为高度，{{1 }和width:auto以保持比率。

如果您希望将图片保持大小并让其流出内容区域，则可以从style.css第202行的height:auto选择器中删除overflow:hidden。