我实现了以下 html/javascript。我的目标是调整图像大小,同时保持其纵横比,以获取浏览器窗口的高度/宽度。但是,在实现此代码时,每个调整大小事件都会将 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 就完成了。
关于javascript - css背景在div高度重置时重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20714231/