Question

我正在使用以下CodePen链接中的代码将图像粘贴到Div，但如果我粘贴一个小图像，则会多次粘贴图像。如果在粘贴后单击div，则会在div中多次显示图像。我希望它只显示一次图像而不是用多个相同的图像填充div

http://codepen.io/netsi1964/pen/IoJbg

 $('.active').removeClass('active');
 $this.addClass('active');

 $this.toggleClass('contain');

 $width.val($this.data('width'));
 $height.val($this.data('height'));
 if ($this.hasClass('contain')) {
 $this.css({'width':$this.data('width'), 'height':$this.data('height'), 'z-   index':'10'})
 } else {
 $this.css({'width':'', 'height':'', 'z-index':''})
 }

})
})

multiple images in div

Answer 1

这是因为您正在切换CSS类.contain，因此切换其background-size。这包括以下CSS：

.contain {
    background-size: cover;
}

点击后，此类将被删除，background-size将恢复默认显示原始尺寸的图片。

此外，因为默认background-repeat值为repeat，它会在两个方向上重复图像以覆盖元素。

停止重复的简单修复是添加

.target {
    background-repeat: no-repeat;
}

但请注意，这不会将元素大小调整为单个图像的大小。

Answer 2

尝试背景重复属性。

background-repeat: no-repeat;

$('.active').removeClass('active');
 $this.addClass('active');

 $this.toggleClass('contain');

 $width.val($this.data('width'));
 $height.val($this.data('height'));
 if ($this.hasClass('contain')) {
 $this.css({'width':$this.data('width'), 'height':$this.data('height'), 'z-   index':'10', 'background-repeat':'no-repeat'})
 } else {
 $this.css({'width':'', 'height':'', 'z-index':'','background-repeat':'no-repeat'})
 }

})
})

将图像粘贴到<div>会多次粘贴一个小图像以适合Div

2 个答案: