切换背景图像，然后将图像大小调整为'；新高度'；使用jQuery

我有以下资料：

HTML:

您当地的CCTV公司在全国拥有80多个安装团队

jQuery：

jQuery(document).ready(function() {
    if (jQuery(window).width() < 880) {
    jQuery('#section-one-img').attr("src", 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg');
    }
    var imgHeight = jQuery('#section-one-img').height();
    jQuery('#section-one-img').height(imgHeight);
});

jQuery（文档）.ready（函数（）{
if（jQuery（window）.width（）<880）{
jQuery（'#第一节img'）.attr（“src”，'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg');
}
var imgHeight=jQuery（“#第一节img”）.height（）；
jQuery（“#第一节img”）。高度（imgHeight）；
});

虽然当屏幕大小小于880时，它会加载正确的新图像，但它不会设置图像的新高度（图像的底部被切断）

我的代码中是否有错误来修复此问题？

您必须在更改

src

后立即对图像使用

load（）函数

：

财政上。应创建具有新图像的元素（DOM）并立即计算其尺寸。因此，我们可以调整它们： 出于这个原因，请看一看

实施

jQuery(document).ready(function() {
    if (jQuery(window).width() < 880) {  
        var img = 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg';          

        var pic_real_width, pic_real_height;
        $("<img/>") // Make in memory copy of image to avoid css issues
            .attr("src", img)
            .load(function() {
                pic_real_width = this.width;   // Note: $(this).width() will not
                pic_real_height = this.height; // work for in memory images.
                /*alert(pic_real_width);
                alert(pic_real_height);*/
            });    
   jQuery('#section-one-img').attr("src", 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg');
          jQuery('#section-one-img').height(pic_real_height);
    }
});

jQuery（文档）.ready（函数（）{
if（jQuery（window）.width（）<880）{
var img=http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg';          
变量pic_real_width，pic_real_height；
$("
希望有帮助！
与其设置所有这些固定大小，为什么不让CSS处理高度：

JS:

jsFiddle：

但是，当您可以使用媒体查询仅使用CSS显示/隐藏不同的图像时，为什么还要使用jQuery呢？
仍然完全相同？我认为它以某种方式获取了原始图像的图像高度，而不是新图像的高度是可行的，尽管setTimeout（function（）{}，10）；包装加载功能也可以，不知道哪一个更好，两者都做相同的事情。超时不是一个好的做法。我认为我提供的小提琴更好更安全。这是你的选择：）新图像的高度应该是多少？它应该始终具有100%的宽度并保持比例吗？
jQuery(document).ready(function() {
    if (jQuery(window).width() < 880) {  
        var img = 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg';          

        var pic_real_width, pic_real_height;
        $("<img/>") // Make in memory copy of image to avoid css issues
            .attr("src", img)
            .load(function() {
                pic_real_width = this.width;   // Note: $(this).width() will not
                pic_real_height = this.height; // work for in memory images.
                /*alert(pic_real_width);
                alert(pic_real_height);*/
            });    
   jQuery('#section-one-img').attr("src", 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg');
          jQuery('#section-one-img').height(pic_real_height);
    }
});

jQuery(document).ready(function() {
    if (jQuery(window).width() < 880) {
    jQuery('#section-one-img').attr("src", 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg');
    }
   // removed height setting here
});

img {
    height: auto;
}