如果无法完全显示，则背景重复会阻止图像显示

Question

当我在CSS中重复背景时，我只想显示图像是否可以完全显示。

我必须设置宽度（以像素为单位）吗？或者是否有一个CSS属性，只有在可以完全显示的情况下才显示图像？

[]

<div align="left" style="padding-left: 30px;">
    <div class="rep_div" style="background:url('file.png'); width:93.5%; display:block;height:3px;"></div>
</div>

Answer 1

我不确定你到底想要实现什么，但是从表面上看，你需要一些测量你的div尺寸的JS，测量你的图像的尺寸并进行简单的比较，然后如果div是相同的尺寸或大于图像将div的背景图像设置为图像的URL。

这是使用CSS和jQuery的基本近似

/* css */
#container{ ...no image background set here... }

/* js */
var $container = $('#container');
var image = new Image();
image.src = 'path/to/image.jpg';
image.onload = function() {
  if (
    $container.outerWidth() >= this.width &&
    $container.outerHeight() >= this.height
  ) $container.css('background-image': 'url('+image.src+')');
});

如果你试图准确地拟合重复图像的数量，那么这个代码很容易适应不仅仅依赖于“等于或大于”，而是图像尺寸的乘法。

请务必注意，此代码只运行一次，更好的做法是这样的：

var $container = $('#container');
var image = new Image();

image.src = 'path/to/image.jpg';

var calculate = function() {
  if (
    $container.outerWidth() >= image.width &&
    $container.outerHeight() >= image.height
  ) {
    $container.css('background-image': 'url('+image.src+')');
  }
  else {
    $container.css('background-image': 'none');
  }
});

image.onload = calculate;
$(window).on('resize', calculate);

Answer 2

好的，@ Arnold我不确定我是否完全理解您的问题，但如果有帮助，您可以使用background-size和background-repeat属性，例如：

<div style="background-image: url('file.png'); background-size: x% y%; background-repeat: repeat-x;">

其中x和y分别是表示宽度和高度的百分比。因此，如果您的图像是纵向（高于宽度），请将y设置为100％，将x设置为可被100％整除的百分比，最好代表纵横比（因此类似于10,20,25,33.3， 50％）。这样，您的图像将沿x轴均匀重复，但不需要在y上，因为它占据了元素高度的100％。

（相反，如果图像是横向的（宽度比它高），x将为100％，y可以被100整除，并使用repeat-y而不是repeat-x。）

这可能需要一些修改，并取决于图像是否会看起来很好，其宽高比有些偏差。它可能是也可能不是您需要的解决方案，但我认为它值得一试。