CSS图像调整自身大小的百分比? [英] CSS image resize percentage of itself?
问题描述
我正在尝试使用其自身的百分比来调整 img 的大小.例如，我只想通过将图像大小调整为 50% 来将其缩小一半.但是应用 width: 50%; 会将图像的大小调整为容器元素的 50%(例如，可能是 的父元素).
问题是，我可以在不使用 javascript 或服务器端的情况下以自身的百分比调整图像大小吗?(我没有图像大小的直接信息)
我很确定你不能这样做，但我只是想看看是否有仅智能 CSS 的解决方案.谢谢！
我有 2 个方法给你.
方法一.
html:
<img class="fake";src="example.png";/><div id="img_wrap"><img类=正常"src="example.png";/></div>
css:
#wrap {溢出:隐藏；位置:相对；向左飘浮;}#wrap img.fake {向左飘浮;可见性:隐藏；宽度:自动；}#img_wrap {位置:绝对；顶部:0；右:0；底部:0；左:0；}#img_wrap img.normal {宽度:50%；}注意: img.normal 和 img.fake 是同一张图片.
浏览器支持说明:此方法适用于所有浏览器，因为所有浏览器都支持方法中使用的 css 属性.
该方法是这样工作的:
#wrap和#wrap img.fake有流量#wrap具有overflow: hidden以便其尺寸与内部图像相同 (img.fake)img.fake是#wrap中唯一没有absolute定位的元素，这样它就不会破坏第二步#img_wrap在#wrap中具有absolute定位，并在大小上扩展到整个元素 (#wrap)- 第四步的结果是
#img_wrap与图像具有相同的尺寸. - 通过在
img.normal上设置width: 50%，它的大小是#img_wrap的50%，因此50%原始图像大小.
I am trying to resize an img with a percentage of itself. For example, I just want to shrink the image by half by resizing it to 50%. But applying width: 50%; will resize the image to be 50% of the container element (the parent element which maybe the <body> for example).
Question is, can I resize the image with a percentage of itself without using javascript or server side? (I have no direct information of the image size)
I am pretty sure you cannot do this, but I just want to see whether there are intelligent CSS only solution. Thanks!
I have 2 methods for you.
Method 1. demo on jsFiddle
This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.
html:
<img class="fake" src="example.png" />
css:
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');
}
Browser support note: browsers statistics showed inline in css.
Method 2. demo on jsFiddle
html:
<div id="wrap">
<img class="fake" src="example.png" />
<div id="img_wrap">
<img class="normal" src="example.png" />
</div>
</div>
css:
#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%;
}
Note: img.normal and img.fake is the same image.
Browser support note: This method will work in all browsers, because all browsers support css properties used in method.
The method works in this way:
#wrapand#wrap img.fakehave flow#wraphasoverflow: hiddenso that its dimensions are identical to inner image (img.fake)img.fakeis the only element inside#wrapwithoutabsolutepositioning so that it doesn't break the second step#img_wraphasabsolutepositioning inside#wrapand extends in size to the entire element (#wrap)- The result of the fourth step is that
#img_wraphas the same dimensions as the image. - By setting
width: 50%onimg.normal, its size is50%of#img_wrap, and therefore50%of the original image size.
这篇关于CSS图像调整自身大小的百分比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
