Question

我想为图片设置一个盒子阴影插图。这对于图片来说是不可能的，所以我搜索了一些变通方法并将其作为其中之一：JsFiddle

问题在于跨度对图像有很好的包装，但如果图像具有包含边距或填充的样式，则跨度不适合图像，如示例中所示。

那么我该怎样做才能使跨度始终包裹图像而没有边距的空白？如果有更好的方法，请告诉我。

CSS

.image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}
.image-wrap:after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        box-shadow: inset 0px 0px 0px 5px red;
}

.image-wrap img {   
    width:300px;
    margin-left:150px;
}

Jquery

$('img').each(function() {
    var imgClass = $(this).attr('class');
    $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');
    $(this).removeAttr('class');
});

Answer 1

在这种特定情况下有效的一种方法是手动将margin-left从img移动到父级别：

$('img').each(function () {
    var imgClass = $(this).attr('class');
    $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>').removeClass(imgClass)
        .parent().css('margin-left',$(this).css('margin-left')).end()
        .css('margin-left',0);
});

Answer 2

的 LIVE DEMO

$('img').each(function() { $(this).wrap('<span class="image-wrap ' + this.className + '"/>').removeAttr('style'); this.className=''; });

CSS：

.img1{ width:300px; border:3px solid #f00; margin-left:40px; /* NOTE THE IMAGE MARGIN ! */ } .image-wrap{ position:relative; display:inline-block; box-shadow: inset 0px 0px 20px #f00; } .image-wrap img{ position:relative; width:100%; z-index:-1; }

为图像保留（或设置）box-shadow插图

2 个答案: