方法1

Question

我使用媒体查询使我网站上的文字和布局（边距，填充等）响应..

我将其设置为“如果浏览器窗口＆lt; 1300px”然后将所有度量更改为80％。这一切都很好，但我的图像没有响应，有没有办法在我的图像上使用jquery设置类似的东西，使img宽度为其全尺寸的80％（与缩放页面的其余部分成比例？）

使用的媒体查询是：

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

Answer 1

如果屏幕宽度小于img，以下内容会将1300px元素缩放为80％：

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

Answer 2

这类似于Aaron的答案，但我认为它完成了不同的东西，因为它使它与窗口的大小成比例，但它并不总是它的全尺寸的80％。

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

Answer 3

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

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

方法1

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

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

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

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

  }

方法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);
    }
  }

Answer 4

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

比例图像80％ - jquery

4 个答案:

方法1

方法2

方法3