我实现了以下html / javascript。我的目标是调整图像的大小,同时保持其宽高比,以获取浏览器窗口的高度/宽度。但是,在实现此代码时,每个resize事件都会使div的高度增加(旧高度+新高度,而不仅仅是将其设置为新高度。如何阻止div以这种方式增长?
<div class="header-pc" style="background-image: url('assets/sunset-flipped1.png');background-size: 100% auto;height:1000px"></div>
function resizeHeaderPic(){
var height = $(window).height();
$('.header-pc').height(height);f
}
$(document).ready(function(){
//resizeHeaderPic();
$(window).resize(function(){
resizeHeaderPic();
});
});
最佳答案
不要将Javascript用于琐碎的CSS任务。
body {
background-image: url('assets/sunset-flipped1.png');
background-size: cover; /* Fit to cover entire element */
background-position: center; /* Where to scale from in the image */
}
您无需任何HTML或Javascript就可以完成工作。