为什么图像被CSS掩盖了？

我把图像分为以下WordPress站点：为什么图像被CSS掩盖了？

http://sofrahomemadefood.com/menu/

的形象是大。因此，它运行在它的容器上。它被下一个区域覆盖了如下图所示：

Image gets covered up by the surrounding region

我想了解的这种情况的原因，以及如何防止被掩盖起来的形象呢？

来源

2012-09-05 Mert Nuhoglu

我将'width：100％'添加到'.alignnone'类，并且它适合容器。尝试一下。 – Bongs

这是背景图片还是''标签？ – Kyle

@KyleSevenoaks这是一个标签 –

原因是该段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%; 
}

什么这样做：

The图像的nautral纵横比由使用width:auto和height:auto
从爆发的它的边界的防止图像保留是通过max-height:100%和父元素max-width:100%

在一个侧面说明：

对于总是希望图像缩放到父宽度/高度的人，保留纵横比：您可以使用min-width:100%（对于宽度）或min-height:100%高度，使用width:auto和height:auto来保留比率。

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

来源

2012-09-05 06:52:39

谢谢。事实上，这解决了问题。但它缩小了一些图像。是否有可能让图像溢出周围区域？ –

是的，请检查答案的最后一段。 –

非常感谢。这个信息帮了我很多:) –

为什么图像被CSS掩盖了？

回答

相关问题