CSS图像调整自身的百分比？ [英] CSS image resize percentage of itself?
问题描述
我试图用一个百分比自己调整img的大小。例如，我只想将图像缩小一半，将其调整为50％。但是应用 width：50％; 会将图像大小调整为容器元素的50％（父元素也许< body& / code>）。
问题是，我可以使用自身的百分比调整图片大小，而无需使用javascript或服务器端？ （我没有图像大小的直接信息）
我确定你不能这样做，但我只想看看是否有智能的CSS解决方案。谢谢！
我有2种方法。
1. jsFiddle演示
此方法只调整图片大小
html ：
$ b
< img class =fakesrc =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'）;
}
浏览器支持说明：浏览器统计信息在 html： css： p> 注意： > css 中显示为内联。 jsfiddle.net/matmuchrapna/dhcDx/23/\"> dos on jsFiddle
< div id =wrap>
< img class =fakesrc =example.png/>
< div id =img_wrap>
< img class =normalsrc =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 是同一张图片。
em> css b
$ b
该方法以这种方式工作：
- '＃wrap'和'#wrap img.fake 'have
flow -
#wrap：hidden 设置#wrap尺寸与内部图像相同（img.fake） -
img.fake只是没有absolute或修复在#wrap中的位置，以不破坏第二步的结果。 -
#img_wrap在#wrap中有绝对整个元素（#wrap） - 第四步的结果是
#wrap_img c>宽度：50％; code>的img.normal，现在你得到了你的结果。
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:
- '#wrap' and '#wrap img.fake' have
flow #wraphasoverflow: hiddento set#wrapdimensions identically to inner image (img.fake)img.fakeis only the one element withoutabsoluteorfixposition in#wrapto not break the result of second step.#img_wraphasabsoluteposition inside#wrapand extended in size to the entire element (#wrap)- Result of the fourth step is
#wrap_imgthe same dimensions as image. - Using
responsive imagesmethod setwidth: 50%;ofimg.normaland now you got your result.
这篇关于CSS图像调整自身的百分比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
