css - 在CSS中将边框设置为溢出的图像

Question

这是一个例子：http: //jsfiddle.net/7zhLm/5/

里面的图片比 div 支持的要大。

因此，它正在裁剪其余部分 ( overflow-x: hidden)。

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

在使用开发工具检查了那里发生的情况后，我看到下部覆盖了白色边框。

我该如何解决？

Answer 1

我看到你同时使用overflow-x和overflow-y。您可以overflow:hidden;在任何浏览器上使用它，而-x旧-y版本不支持它。

无论如何，为避免它，您可以添加另一个<div>. 检查现场演示，这里是更新的代码：

<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 您尝试使用填充设置边框。将其更改为 10 像素的白色边框。

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 文件中声明宽度/高度的代码更少。供参考