我试图用自己的百分比来调整img的大小.例如,我只想将图像缩小到50%,将图像缩小一半.但是应用width: 50%;会将图像的大小调整为容器元素的50%(<body>例如,可能是父元素).
问题是,我可以在不使用javascript或服务器端的情况下用一定比例调整图像大小吗？(我没有图像大小的直接信息)
我很确定你不能这样做,但我只想看看是否有智能的CSS解决方案.谢谢!
Vla*_*kov 99
我有2种方法.
此方法仅调整图像大小,而不是DOM中的实际尺寸,以及调整大小后居中于原始大小中间的视觉状态.
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');
}?
浏览器支持说明:浏览器统计信息显示为内嵌css.
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%;
}?
注意: 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%原始图像的尺寸.小智 38
HTML:
<span>
<img src="example.png"/>
</span>
CSS:
span {
display: inline-block;
}
img {
width: 50%;
}
这必须是使用容器元素方法的最简单的解决方案之一.
当使用容器元件的方法,这个问题的变化这个问题.诀窍是让容器元素收缩包装子图像,因此它的大小将等于未图像化图像的大小.因此,当将width图像的属性设置为百分比值时,图像相对于其原始比例缩放.
其他一些shrinkwrapping启用属性和属性值的是:float: left/right,position: fixed并且min/max-width,如在链接的问题提及.每种都有自己的副作用,但是display: inline-block会更安全.马特float: left/right在他的回答中提到过,但他错误地将其归因于此overflow: hidden.
编辑: 正如木马所提到的,您还可以利用新引入的CSS3内在和外在大小模块:
HTML:
<figure>
<img src="example.png"/>
</figure>
CSS:
figure {
width: intrinsic;
}
img {
width: 50%;
}
Emi*_*dın 11
尝试zoom财产
<img src="..." style="zoom: 0.5" />
编辑:显然,FireFox不支持zoom属性.你应该使用;
-moz-transform: scale(0.5);
对于FireFox.
另一种解决方案是使用：
<img srcset="example.png 2x">
它不会验证，因为该src属性是必需的，但它可以工作（在任何版本的 IE 上除外，因为srcset不受支持）。
这是一个非常古老的线程，但我在寻找在标准分辨率显示器上显示视网膜（高分辨率）屏幕捕获的简单解决方案时发现了它。
因此，对于现代浏览器，只有 HTML 解决方案：
<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>
这告诉浏览器图像是其预期显示尺寸的两倍。该值是成比例的，不需要反映图像的实际大小。也可以使用 2w 1px 来达到相同的效果。src 属性仅用于旧版浏览器。
它的好处是它在视网膜或标准显示器上显示相同的大小，在后者上缩小。
| 归档时间： |
|
| 查看次数： |
152241 次 |
| 最近记录： |