Css 真正响应百分比图像大小调整独立于容器
好的,所以我正在寻找真正的响应百分比图像大小调整,这是独立于容器。换句话说,我想调整图像相对于自身大小的大小 原因是我可以动态调整页面上所有图像的大小,以获得更小的屏幕尺寸 现在,由于它将用于CMS解决方案,并且用户被假定为HTML非savy,我们不能用任何东西包装图像,我们不能向它们添加类/ID等 我想更改页面上的所有图像,但可以应用类或ID的某些图像除外 我目前正在使用:Css 真正响应百分比图像大小调整独立于容器,css,image,percentage,dynamic-resizing,Css,Image,Percentage,Dynamic Resizing,好的,所以我正在寻找真正的响应百分比图像大小调整,这是独立于容器。换句话说,我想调整图像相对于自身大小的大小 原因是我可以动态调整页面上所有图像的大小,以获得更小的屏幕尺寸 现在,由于它将用于CMS解决方案,并且用户被假定为HTML非savy,我们不能用任何东西包装图像,我们不能向它们添加类/ID等 我想更改页面上的所有图像,但可以应用类或ID的某些图像除外 我目前正在使用: img { -webkit-transform: scale(0.625) translate(-29%, 0);
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+
在您提出以下任何建议之前,我的测试不起作用,但我很高兴被证明是错误的: 最大高度/最大宽度在某些浏览器中,它们仍然根据容器大小调整大小 变焦不完全支持,如果是的话将是完美的 高度/宽度容器大小不是图像 Div wrapper对我正在做的事情没有好处 如果我是完全厚和接近这完全是错误的什么,没有问题,请告诉我。任何帮助都将不胜感激 谢谢Stephen好的,现在我使用这个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,我不会反对
谢谢
斯蒂芬(Stephen)因此,经过一个周末的沉睡,我的方法可能是错误的。由于这是一个CMS,非techi用户只能访问某些区域,因此我应该专门针对这些区域。我还犯了一个与我的网站相关的基本错误。由于我的网站大多从两列变为一列,我只需要在单个列变小时调整大小。一开始我没有考虑到这一点,因此图像会变得太小,或者与其他内容不成比例。