Question

好的，所以我正在寻找独立于容器的真正响应百分比图像大小调整。换句话说，我想相对于它自己的大小调整图像大小。

原因是我可以动态调整页面上所有图像的尺寸，以缩小屏幕尺寸。

现在，它被用作CMS解决方案并且用户被认为是HTML非常规，我们无法用任何东西包装图像，我们无法为它们添加类/ ID等

我想要更改页面上的所有图片除了一些我可以应用类或ID的图像。

我目前正在使用：

img {
  -webkit-transform: scale(0.625) translate(-29%, 0); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.625) translate(-29%, 0); /* FF3.5+ */
      -ms-transform: scale(0.625) translate(-29%, 0); /* IE9 */
       -o-transform: scale(0.625) translate(-29%, 0); /* Opera 10.5+ */
          transform: scale(0.625) translate(-29%, 0);
             /* IE6–IE9 */
             /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}

.noScale, .userFeed img, .twitter img, .subLogo {
  -webkit-transform: scale(1) translate(0,0); /* Saf3.1+, Chrome */
     -moz-transform: scale(1) translate(0,0); /* FF3.5+ */
      -ms-transform: scale(1) translate(0,0); /* IE9 */
       -o-transform: scale(1) translate(0,0); /* Opera 10.5+ */
          transform: scale(1) translate(0,0);
            /* IE6–IE9 */
             /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}

这主要是有效的，但是所有图像仍然被其他所有图像看作是它们的原始尺寸，所以它有效地填充它周围的原始尺寸。这不是一个大尺寸减少62％的大问题，但随着减少变小而成为一个更大的问题。显然，还需要有几种媒体查询实现来处理越来越小的屏幕尺寸。

转换位于此处，因此图像的左边缘仍然是图像的左边缘。

我会考虑JS / JQuery解决方案，但实际上我想要一种与现代浏览器兼容的CSS方式。所以ie9 +。

在您提出以下任何建议之前，我的测试中没有工作，但我很高兴被证明是错误的：

max-height / max-width（在某些浏览器中，它们的大小仍与容器相对）缩放（不完全支持，如果是的话，将是完美的）高度/宽度（容器大小不是图像） Div包装（对我想做的事情没有好处）

如果我真的很厚，接近这完全错了什么，没问题，请告诉我。任何帮助都会受到大力赞赏。

由于

斯蒂芬

Answer 1

好的，所以我现在正在使用这个JQuery为我调整大小，将上面的CSS放在包装器中。

<script>
$( document ).ready(function() {
if (document.documentElement.clientWidth < 700) {
    $("img").hide();
}
    $( window ).load(function() {
    if (document.documentElement.clientWidth < 700) {
        $('img:not(".noScale, .subLogo")').each(function() {
            $( this ).css("width", "auto" );
            $( this ).css("width", this.width * ( $( document ).width() / 700));
            $( this ).css("height", "auto" );
            $( this ).show();
        });
    }
    $("img").show();
});
    $( window ).resize(function() {
    if (document.documentElement.clientWidth < 700) {
        $('img:not(".noScale, .subLogo")').each(function() {
            $( this ).css("width", "auto" );
            $( this ).css("width", this.width * ( $( document ).width() / 700));
            $( this ).css("height", "auto" );
        });
    }
    if (document.documentElement.clientWidth > 700) {
        $('img:not(".noScale, .subLogo")').each(function() {
            $( this ).css("width", "auto");
        });
    }
    }); 
}); 
</script>

我相信你可以告诉我，我不是JQuery专家，但它有效。

它隐藏了图像（因为它看起来很糟糕，看到它们突然调整大小，如果你在加载页面之前尝试它，有时图像大小是空的）。然后它按照我决定的一些百分比计算它们的大小。然后它显示了它们。它隐藏并显示所有图像，因为否则它看起来很傻。

在计算之前将宽度设置为自动是因为否则它会使用已经缩小的图像尺寸，这会影响计算。

它还会在窗口调整大小时再次完成所有操作，但不会隐藏任何内容。

某些时候在移动设备上加载速度可能会很慢，但一旦加载，并在陆地和端口之间切换，我就看不到任何延迟。

无论如何，它现在适合我的需要。

如果有人有更好的解决方案会很棒。因为这仍然不完美，我喜欢完美。

任何人都想整理/加速我的JQuery，我不会反对。

由于

斯蒂芬

真正响应的百分比图像调整大小独立于容器

1 个答案: