通常我能够在给定足够时间的情况下解决问题(因此我的第一篇文章在这里发布),但是我已经在这个问题上打了一会儿。
我试图:
<img>
标签,而不是<div>
上的背景图片),这是我目前的尝试。中心脚本完美运行。此外,加载了正确的图像文件。但是,当窗口变宽或变窄时(图像文件不会动态重新加载),我无法使重新调整大小的部分工作。
CODE:
<!-- Center Floating Div Elements -->
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
$(window).load(function(){
$('.laptop').center();
window.onresize = function(event) {
$('.laptop').center();
}
});
</script>
<!-- Load correct image size on window load -->
<script>
$(function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
})
</script>
<!-- Re-load new image size on window resize -->
<script>
$(window).onresize = function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
});
</script>
相关的HTML只是一个带有&#34;笔记本电脑&#34;类的标签,包裹着一个图像标签(我想让图像源动态改变)。
lharby:这是我对你的建议的尝试,无法让它工作:
<script>
var picresize = $(function(){
if($(window).width() >= 0 && $(window).width() <= 900){
$("img").attr("src","/images/laptop-900.png");
}
else if($(window).width() > 900 && $(window).width() <= 1400){
$("img").attr("src","/images/laptop-1500.png");
}
else{
$("img").attr("src","/images/laptop-2100.png");
}
});
$(window).load(function(){
$picresize();
window.onresize = function(event) {
$picresize();
}
});
</script>
答案 0 :(得分:0)
详细说明评论。我做了这个小提琴:
https://jsfiddle.net/lharby/5p2xdnaf/
现在有一个名为chImage的函数可以检查窗口宽度,然后可以在各种事件上触发。
我还在一个变量中存储了窗口宽度,以使代码更清晰,更易于阅读(您还可以在变量中设置大小,然后在需要时更改它们,因此只需编写一次)。
var chImage = function(){
var winWidth = $(window).width();
if(winWidth >= 0 && winWidth <= 900){
$("img").attr("src","http://placehold.it/350x150");
}
else if(winWidth > 900 && winWidth <= 1400){
$("img").attr("src","http://placehold.it/500x300");
}
else{
$("img").attr("src","http://placehold.it/800x400");
}
};
然后调用此函数并将其绑定到我们想要的任何事件。
$(window).on("load resize", function(){
chImage();
});
修改
我确实移动了下面的居中功能,以确保它不与此功能相关,但可以使用css实现居中。我会尝试更新。
答案 1 :(得分:0)
Chris Coyier撰写了一篇关于figuring out responsive images的完全有趣的文章。
图像居中可以在CSS中完成,不需要脚本。请参阅centering things和solved by flexbox。