【问题标题】：scale image 80% - jquery缩放图像 80% - jquery
【发布时间】：2013-03-16 17:50:35
【问题描述】：

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

我将其设置为“如果浏览器窗口

我使用的媒体查询是：

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

【问题讨论】：

为什么不将图像的 css 添加到相同的 css 规则中？如果您在图像标签中硬编码大小......不要
@iight - 我无法添加图像 css，因为图像宽度是在 html width="" 属性中设置的。虽然我对其他 css、字体大小、填充等进行了硬编码。还有其他方法吗？

标签： javascript jquery css media-queries

【解决方案1】：

如果屏幕宽度小于1300px，以下会将img元素缩放到80%：

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

【讨论】：

@AaronBlenkush - 谢谢，但是如果屏幕小于 1300 像素，我将我的媒体查询设置为使 css 小 80%，因此它不会设置屏幕变暗。 IE。如果屏幕是 1000 像素，它仍然会使用 80% 的错误。有没有办法用 jquery 做到这一点？
@sam 你能否简单地添加一个if 语句来检查window 宽度。如果 = 1300 这样做？
啊，是的，没想到！如果您想修改答案，请将其标记为已接受
@sam 我想我现在明白你的意思了。见编辑。这有点不同，但我相信它可以满足您的需求。我不确定你所说的“所以它没有设置屏幕变暗”是什么意思
@aaron - “所以它没有设置屏幕变暗”我的意思是它从浏览器窗口测量 1300 像素。而不是从屏幕尺寸测量 1300 像素。（作为兄弟）

【解决方案2】：

这与 Aaron 的回答类似，但我认为它完成了一些不同的事情，因为它使其与窗口的大小成正比，但并不总是其完整大小的 80%。

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

【讨论】：

这会比.each() 循环更简单，你是对的。

【解决方案3】：

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

对与 CSS\design 相关的东西使用 JS 解决方案对我来说是错误的。使用纯 CSS 解决方案怎么样？以下是一些想法：

方法一

使用硬编码图像 css 覆盖您的硬编码图像属性。 jsfiddle

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

    img.pasta{
        width: 250px;
        height: 300px;
    }

    img.pizza{
        width: 450px;
        height: 200px;
    }

  }

方法二

使用 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);
    }
  }

【讨论】：

我同意，使用 js 似乎过于复杂，或者更糟糕的是，我正在考虑使用 php 将 width="" 属性回显到 html img 标签中！我最终做的类似于 method2 - 如我上面的 jsfiddle 中所述

【解决方案4】：

我已经玩了一段时间了，并找到了使用媒体查询和 css 的替代方法，使用 img {max-width: 100%;} - 没有 js.. 在这里查看 jsfiddle - http://jsfiddle.net/qEf5J/

【讨论】：