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

时间:2015-07-12 07:19:32

标签: jquery twitter-bootstrap

我正在寻找一种解决方案,可以拉伸任何图像元素以适应屏幕尺寸(缩放它)并用作该页面的背景。 请注意我不是在寻找一个单页背景图像解决方案,它是什么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>

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

从你的问题的措辞中不清楚,但我认为你想要的是将图像拉伸并修复到页面的背景。这可以(而且应该)仅通过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);
};

答案 2 :(得分:0)

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

$(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/