Question

我正在寻找一种解决方案，可以拉伸任何图像元素以适应屏幕尺寸（缩放它）并用作该页面的背景。请注意我不是在寻找一个单页背景图像解决方案，它是什么backstretch或vegas jquery插件呢！

    <body>
                <div class="somecss">
                        <img src="images/bg1.jpg">
                </div>
                <div class="somecss">
				        <img src="images/bg2.jpg">
                </div>
				<div class="somecss">
						<img src="images/bg3.jpg">
				</div>
    </body>

Answer 1

CSS $Query = "SELECT COUNT(`SubmissionId`) SubmissionCount, `FormId`, `FieldName`, `FieldValue` FROM #__rsform_submission_values WHERE `FormId`='".(int) $formId."' AND `FieldName`='listing' AND `FieldValue`='".$listing."' GROUP BY `FormId`, `FieldName`, `FieldValue`"; $db->setQuery($Query); $nrSub = $db->loadAssocList(); print_r($nrSub);可能就是您所需要的。它会将图像填充到容器的大小。无需JavaScript。

background-size: cover告诉浏览器确保图像始终覆盖整个容器，即使它必须拉伸图像或切割一点咬掉其中一条边。

参考：https://css-tricks.com/almanac/properties/b/background-size/

Answer 2

从你的问题的措辞中不清楚，但我认为你想要的是将图像拉伸并修复到页面的背景。这可以（而且应该）仅通过CSS实现，而不需要jQuery。

body {
  background-image: url(http://example.com/your/image.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: none;
}

但为了完整起见：

$.fn.setBackgroundImage = function(url) {
  return this.css({
    backgroundImage: url,
    backgroundSize: 'cover',
    backgroundAttachment: 'fixed',
    backgroundPosition: 'center',
    backgroundRepeat: 'none'
  });
};

$.setBackgroundImage = function(url) {
  $(document.body).setBackgroundImage(url);
};

Answer 3

如果您想要调整其特定的图像元素而不是背景图像属性，则需要确定比例，然后指定相对类以适合屏幕

$(window).load(function() {
  $('.container').find('img').each(function() {
    var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
    $(this).addClass(imgClass);
  })
})

请参阅http://jsfiddle.net/sjmcpherso/vhotnp1x/

是否有任何jquery插件来拉伸任何div以采取全屏幕

3 个答案: