创建边界间隙

Question

我正在尝试在 div 的边框内创建一个间隙以适合图像，类似于：

有没有办法在纯 CSS 中做到这一点？我只能看到：

.box {
    background: url(img.png) bottom left;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
}

但我的问题是border-right: 1px solid #eee; 在我的图像顶部创建了一条线，这当然是不希望的。

它需要响应。这张图片是一个示例，但您大致了解。

Answer 1

这样的？

http://jsfiddle.net/6Ufb5/

div {
    border: 1px solid #ccc;
    position: relative;
}
img {
    position: absolute;
    top: 10px;
    left: 10px;
}

给定容器相对位置和 img 绝对位置，将其向左移动 10px 并从顶部向下移动 10px，然后您就拥有了您想要的。 对于响应部分，这只是给容器和/或 img 一个 % 宽度。 像这样：

http://jsfiddle.net/6Ufb5/2/

Answer 2

您可以通过使用图像元素的绝对定位来实现这一点 - 它必须位于 <img> 元素中，而不是作为背景图像，因为它永远不会与父边框重叠（或者即使它通过调整background-position 属性，边框将位于背景图像的顶部...顺便说一下，这是预期的行为。

<div class="box">
    Content goes here
    <img src="http://placehold.it/300x200" />
</div>

还有 CSS：

.box {
    position: relative;
    border: 1px solid #333;
}
.box img {
    position: absolute;
    bottom: -1px;
    right: -1px;
}

---

如果您想要一个动态和/或响应式的解决方案，您可能不得不求助于 JS，例如根据框尺寸调整图像大小，并为框指定高度以考虑图像高度（由于图像是绝对定位的，因此从文档流中取出）。

在此处查看小提琴：http://jsfiddle.net/teddyrised/xH6UV/

Answer 3

如果您可以更改标记，这可能会起作用。对于可访问性，我认为图像应该是图像而不是背景，并且此方法是响应式的（尽管您可能希望通过媒体查询更改小尺寸的边距）。

http://jsfiddle.net/isherwood/79Js5

.box {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 10px 0 10px 10px;
    width: 40%;
}
.box img {
    margin-right: -10%;
    margin-bottom: -10%;
    width: 105%;
}

<div class="box">
    <img src="http://placehold.it/200x100/f3f3f3" />
</div>