CSS图像本身的尺寸调整百分比?
我正在尝试使用自身百分比来调整img的大小。例如,我只想通过将图像尺寸调整为50%将图像缩小一半。但是应用width:
50%;会将图像调整为容器元素(例如,父元素)的50%<body>
。
问题是,我可以在不使用javascript或服务器端的情况下按一定比例调整图像大小吗?(我没有图像尺寸的直接信息)
我很确定您不能这样做,但是我只想看看是否有仅CSS的智能解决方案。谢谢!
回答:
我有两种方法给你。
回答:
此方法仅在视觉上调整图像大小,而不在DOM中调整其实际尺寸,并且调整大小后的视觉状态以原始大小的中间为中心。
<img class="fake" src="example.png" />
img { -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
-moz-transform: scale(0.5); /* FF3.5+ */
-ms-transform: scale(0.5); /* IE9 */
-o-transform: scale(0.5); /* Opera 10.5+ */
transform: scale(0.5);
/* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}
浏览器的统计信息以内联显示css
。
回答:
<div id="wrap"> <img class="fake" src="example.png" />
<div id="img_wrap">
<img class="normal" src="example.png" />
</div>
</div>
#wrap { overflow: hidden;
position: relative;
float: left;
}
#wrap img.fake {
float: left;
visibility: hidden;
width: auto;
}
#img_wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#img_wrap img.normal {
width: 50%;
}
img.normal
和img.fake
是同一张图片。
该方法将在所有浏览器中都可用,因为所有浏览器都支持css
该方法中使用的属性。
该方法以这种方式工作:
#wrap
并#wrap img.fake
有流量#wrap
具有overflow: hidden
使得它的尺寸是相同的内图像(img.fake
)img.fake
是内部唯一#wrap
没有absolute
定位的元素,因此不会破坏第二步#img_wrap
在absolute
内部定位#wrap
并在尺寸上扩展到整个元素(#wrap
)- 第四步的结果是
#img_wrap
具有与图像相同的尺寸。 - 通过设置
width: 50%
上img.normal
,它的大小是50%
的#img_wrap
,因此50%
原始图像的尺寸。
以上是 CSS图像本身的尺寸调整百分比? 的全部内容, 来源链接: utcz.com/qa/422822.html