HTML / IE:拉伸图像以适应,保留宽高比 [英] HTML/IE: stretch image to fit, preserve aspect ratio
本文介绍了HTML / IE:拉伸图像以适应,保留宽高比的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< img src =file:// [filename ]>
即可显示图片。
现在我想缩小图像以适应可用的窗口,但保留宽高比。
< img src =file:// [filename]width =100%height =100> ;
延伸,但也会扭曲图像。
是否有一些HTML欺骗来做到这一点?
IE只有解决方案没问题,因为这是在托管的浏览器控件中。
解决方案
比例,您只需要指定一个维度即:
< img src =file:// [filename]width =100%alt =/>
您可以使用javascript来确定最大尺寸并相应调整大小。
< script type =text / javascript>
函数getImgSize(id){
var pic = document.getElementById(id);
var h = pic.offsetHeight;
var w = pic.offsetWidth;
alert('图片尺寸是'+ w +'*'+ h);
}
< / script>
In an HTML window, I am setting a custom body
<img src="file://[filename]">
to display an image.
Now I want to strectch the image to fit the available window, but preserve aspect ratio.
<img src="file://[filename]" width="100%" height="100">
stretches but also distorts the image.
Is there some HTML trickery to do that? IE only solution is fine, since this is in a hosted broweser control.
解决方案
If you want to preserve aspect ratio, you only need to specify one dimension ie:
<img src="file://[filename]" width="100%" alt="" />
You can use javascript to determine max dimension and resize accordingly
<script type="text/javascript">
function getImgSize(id){
var pic = document.getElementById(id);
var h = pic.offsetHeight;
var w = pic.offsetWidth;
alert ('The image size is '+w+'*'+h);
}
</script>
这篇关于HTML / IE:拉伸图像以适应,保留宽高比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文