我如何使框填充显示在溢出:隐藏的底层图像的顶部

Question

我有一个有padding和border的box。图像有时太大而不适合。我想在不扭曲图像的情况下显示框(裁剪是好的)，并保持填充和边框(哑光)。下面是一个例子:

http://jsfiddle.net/n236vh2u/

注意到底部填充被图像覆盖了吗?我尝试在外部<a>盒子上设置z-index: 2;，设置box-sizing: padding-box;，设置两个边界border: 5px solid white, 1px solid #ccc;，但这些都不起作用。

Answer 1

拆分div和a:

JSFIDDLE

CSS:

#gallerysingle {
    max-height: 100px; 
    border:1px solid #ccc;
    margin: 0 11.2px 11px 0px;
    padding:5px;
    width:100px;
}
#gallerysingle a {
    display: inline-block;
    max-height: 100px;
    overflow: hidden;
}
#gallerysingle img {text-align:justify;}

Answer 2

您可以在图像上使用clip属性。

#gallerysingle img {
    text-align:justify;
    position: absolute;
    clip: rect(0px, 100px, 100px, 0px);
}

注意，它必须是绝对的。因此，你必须将a标签的高度设置为100px。

#gallerysingle a {
    overflow:hidden;
    display: inline-block; 
    max-height: 100px; 
    border:1px solid #ccc;
    margin: 0 11.2px 11px 0px;
    padding:5px;
    width:100px;
    height: 100px;
}

查看实际操作- jsfiddle

为了回答浏览器是否支持这个属性的问题，我做了更多的研究:

作为一个CSS 2.1属性，clip浏览器的支持看起来相当不错。这个MDN页面说它可以在所有主要的浏览器中工作。

我也在手机上做了一些测试，显示它可以与android 4.1 stock浏览器和移动firefox以及ipad 1 safari一起工作。

还请注意，此属性已弃用。MDN建议使用clip-path代替。但显然浏览器对clip-path的支持还不够。所以我现在坚持使用clip，直到clip-path得到广泛支持。clip-path的语法看起来是一样的，只是交换属性名。