Javascript 缩放图像80%-jquery

我使用媒体查询使我的网站上的文本和布局（边距、填充等）具有响应性

我将其设置为“如果浏览器窗口<1300px”，然后将所有测量值更改为80%。这一切都很好，但我的图像没有响应，有没有办法使用jquery在我的图像上设置类似的内容，使img宽度达到其完整大小的80%（与缩放页面的其余部分成比例？）

im使用的媒体查询为：

@media only screen 
  and (max-width : 1300px) {
    /* new css */
  }

---

如果屏幕宽度小于1300px，则以下内容将把

img

元素缩放到80%：

if ($(window).outerWidth() < 1300) {
    $('img').each(function(){
        $(this).width ( $(this).width () * 0.8) );
        $(this).height( $(this).height() * 0.8) );
    });
}

if（$（窗口）.outerWidth（）<1300）{
$（'img'）。每个（函数（）{
$（this.width（$（this.width（）*0.8））；
$（this）.height（$（this）.height（）*0.8））；
});
}

如果屏幕宽度小于

1300px

，以下内容将缩放

img

元素至80%：

if ($(window).outerWidth() < 1300) {
    $('img').each(function(){
        $(this).width ( $(this).width () * 0.8) );
        $(this).height( $(this).height() * 0.8) );
    });
}

if（$（窗口）.outerWidth（）<1300）{
$（'img'）。每个（函数（）{
$（this.width（$（this.width（）*0.8））；
$（this）.height（$（this）.height（）*0.8））；
});
}

这与Aaron的答案类似，但我认为它实现了一些不同的功能，因为它使其与窗口的大小成比例，但并不总是其完整大小的80%

if ($(window).outerWidth() < 1300) {
  $('img').css('width', '80%');
}

if（$（窗口）.outerWidth（）<1300）{
$（'img'）.css（'width'，'80%”）；
}

这与Aaron的答案类似，但我认为它实现了一些不同的功能，因为它使其与窗口的大小成比例，但并不总是其完整大小的80%

if ($(window).outerWidth() < 1300) {
  $('img').css('width', '80%');
}

if（$（窗口）.outerWidth（）<1300）{
$（'img'）.css（'width'，'80%”）；
}

我已经玩了一段时间了，找到了一个替代方案，使用媒体查询和css，使用

img{max width:100%；}

-no js。。看看这里的JSFIDLE-

我已经玩了一段时间了，找到了一个替代方法，使用媒体查询和css，使用

img{max width:100%；}

-no js。。看看这里的JSFIDLE-

太糟糕了，您的图像宽度是由属性定义的，而不是由CSS定义的：(

使用JS解决方案来解决与CSS\design本质相关的问题对我来说是错误的。 使用纯CSS解决方案如何？以下是一些想法：

方法1 使用硬编码图像css覆盖硬编码图像属性

方法2 使用css将图像扩展到其容器维度。这将确保图像在保持纵横比的同时进行扩展

img{
    max-width: 100%;
    max-height: 100%;
}


@media only screen 
  and (max-width : 1300px) {

    .image_container{
        /* lets say that 300px is the "80%" of normal size */
        width: 300px;
     }

  }

方法3 发挥创意，使用CSS转换缩小图像，而不改变其宽度或高度

@media only screen 
  and (max-width : 1300px) {
    img{
        -webkit-transform: scale(0.8);  /* Saf3.1+, Chrome */
        -moz-transform: scale(0.8);  /* FF3.5+ */
        -ms-transform: scale(0.8);  /* IE9 */
        -o-transform: scale(0.8);  /* Opera 10.5+ */
         transform: scale(0.8);
    }
  }

---

太糟糕了，您的图像宽度是由属性而不是CSS定义的：(

使用JS解决方案来解决与CSS\design本质相关的问题对我来说是错误的。 使用纯CSS解决方案如何？以下是一些想法：

方法1 使用硬编码图像css覆盖硬编码图像属性

方法2 使用css将图像扩展到其容器维度。这将确保图像在保持纵横比的同时进行扩展

img{
    max-width: 100%;
    max-height: 100%;
}


@media only screen 
  and (max-width : 1300px) {

    .image_container{
        /* lets say that 300px is the "80%" of normal size */
        width: 300px;
     }

  }

方法3 发挥创意，使用CSS转换缩小图像，而不改变其宽度或高度

@media only screen 
  and (max-width : 1300px) {
    img{
        -webkit-transform: scale(0.8);  /* Saf3.1+, Chrome */
        -moz-transform: scale(0.8);  /* FF3.5+ */
        -ms-transform: scale(0.8);  /* IE9 */
        -o-transform: scale(0.8);  /* Opera 10.5+ */
         transform: scale(0.8);
    }
  }

---

为什么不将图像的css添加到相同的css规则中呢？如果你在图像标签中硬编码大小…不要t@iight-我无法添加图像css，因为图像宽度在html width=“”中设置属性。虽然我正在硬编码其他css、字体大小、填充等。还有其他方法吗？为什么不将图像的css添加到相同的css规则中？如果您在图像标记中硬编码大小…请不要t@iight-我无法添加图像css，因为图像宽度在html width=“”中设置属性。虽然我正在硬编码其他css、字体大小、填充等。还有其他方法吗？@AaronBlenkush-谢谢，但我设置了媒体查询，使css在屏幕小于1300px时缩小80%，这样就不会设置屏幕暗度。也就是说，如果屏幕为1000px，它仍将使用80%的消息。有没有办法用jquery实现这一点？sam你能简单地添加一个

if

语句来检查

窗口的宽度吗？如果<1300做这个，如果>=1300做这个吗？啊，是的，没想到！如果你想修改你的答案，我会把它标记为accepeted@sam我想我现在明白你的意思了。看编辑。它有点不同，但我相信它能满足你的需要。我不是我的意思是，它从浏览器窗口测量1300px，而不是从屏幕大小测量1300px@AaronBlenkush-谢谢，但是我设置了我的媒体查询，如果屏幕小于1300px，那么css将缩小80%，这样就不会设置屏幕变暗。也就是说，如果屏幕是1000px，它仍然会使用80%的消息。有没有办法用jquery实现这一点？@sam你能简单地添加一条
if
语句来检查
窗口的宽度吗如果你想修改你的答案，我会把它标为accepeted@sam我想我现在明白你的意思了。看编辑。它有点不同，但我相信它符合你的要求。我不确定你说的“所以它没有设置屏幕暗度”@aaron-by“所以它没有设置屏幕暗度”是什么意思我的意思是，它从浏览器窗口测量1300px。而不是从屏幕大小测量1300px。（作为bro）这将比
.each（）
循环更简单。你是对的。这将比
.each（）更简单
loop，你说得对。我同意，使用js似乎过于复杂，甚至更糟糕的是，我想使用php来响应width=“”属性到html img标记中！我最终做的与method2类似-正如上面我的JSFIDLE中所述，我同意，使用js似乎过于复杂，或者更糟糕的是，我正在考虑使用php将width=“”属性回显到html img标记中！我最终做的与method2类似-如m中所述