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