Question

以下是一个示例：http://jsfiddle.net/7zhLm/5/

里面的图像比div支持的图像大。

因此正在裁剪其余部分（overflow-x: hidden）。

我正在尝试在图像周围创建一个白色边框，但它似乎不起作用。

在使用开发工具检查了那里发生了什么后，我发现下部覆盖了白色边框。

如何解决这个问题？

Answer 1

我发现您正在使用overflow-x和overflow-y。您可以使用overflow:hidden;，因为它可以在任何浏览器上使用，而旧版本不支持-x和-y。

无论如何，要避免它，您可以添加另一个<div>。检查live demo，这是更新后的代码：

<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>

.splashTabLogout {
    width: 300px;
    height: 100px;
    cursor: pointer;
    background: #fff;
    padding: 10px;
    /* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
    max-width:100%;
    max-height:100%;
    overflow:hidden;
}

Answer 2

JSFiddle 您尝试使用填充设置边框。将其更改为10px白色边框。

Answer 3

您拥有的HTML很好。它是语义的，简单的 - 不要改变它。更改有关它的详细信息，并修复CSS，您将摇滚'http://jsfiddle.net/7zhLm/9/

CSS

.splashTabLogout {
    border: white solid 10px;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,.22) 0 2px 6px;
    overflow: hidden;
}

.splashTabLogout img { width:300px }

HTML

<div id="fixed_event_1" class="splashTabLogout" >
    <img src="your-pic.jpg" />
</div>

注意：在img标记内包含宽度/高度是有效的。期。在图像库或其他任何地方，您可能有多个具有相同尺寸的图像，通常更容易，并且从CSS文件中声明宽度/高度的代码更少。 FYI

在CSS中设置边框到溢出图像

3 个答案: