0

画像にボックス シャドウ インセットを設定したいと思います。これは画像では不可能なので、回避策をグーグルで検索したところ、これがその1つとして見つかりました: 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;
}

Jクエリ

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

2 に答える 2

2

この特定のケースで機能する 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);
});
于 2013-03-28T14:41:14.630 に答える
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;
}
于 2013-03-28T15:04:11.357 に答える