如何将此图像隐藏在它的容器后面？

Question

为了拥有响应式设计，我将此<img>设为max-width:37%;。但是当我打开jsFiddle窗口足够宽以使其足够宽时，图像会延伸到它的容器大小，并且不再适合。

这是我制作的截图：

但是我想要不显示重叠的边，像这样（照片编辑）：

如果您希望在行动中看到它，use my fiddle。

不应该看到图像比其容器的边界更远。 如何防止图片大于容器？

Answer 1

我假设您希望整个图像保持可见。因此，您需要将max-height属性设置为100%。

.mbox img {
    max-height: 100%;
    max-width: 37%;
    position: absolute;
    right: 0;
    z-index: -1;
}

这是jsfiddle。

更新：由于您希望图片保留max-width:37%，您需要隐藏溢出的部分。

我添加了一个包裹div和div.mbox_content的{​​{1}}。我给了这个班级img。您还需要将mbox_wrapper属性添加到z-index:2。

<h2>

以下是更新的jsfiddle。

Answer 2

只需要更改z-index属性

Answer 3

你需要将一个max-height标签应用于css .. 然后图像将无法超过包含div的高度。

max-height: 100%;