1

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

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

我使用的媒体查询是：

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

4 回答 4

2

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

if ($(window).outerWidth() < 1300) {
    $('img').each(function(){
        $(this).width ( $(this).width () * 0.8) );
        $(this).height( $(this).height() * 0.8) );
    });
}
于 2013-03-15T17:55:26.720 回答
2

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

if ($(window).outerWidth() < 1300) {
  $('img').css('width', '80%');
}
于 2013-03-15T18:19:47.257 回答
2

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

将 JS 解决方案用于与 CSS\design 相关的东西对我来说是错误的。使用纯 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;
     }

  }

方法三

发挥创意并使用 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);
    }
  }
于 2013-03-16T09:50:35.487 回答
0

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

于 2013-03-15T23:27:58.087 回答