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

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 专家，但它确实有效。

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

在计算之前将宽度设置为 auto 是因为否则它会使用已经缩小的图像尺寸，并且会弄乱计算。

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

有时在手机上加载会很慢，但一旦加载，并在陆地和港口之间切换，我就看不到任何延迟。

无论如何，目前它能满足我的需要。

如果有人有更好的解决方案，那就太好了。因为这仍然不完美，而我喜欢完美。

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

谢谢

斯蒂芬