创造边界差距

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>