HTML / IE：拉伸图像以适应，保留宽高比 [英] HTML/IE: stretch image to fit, preserve aspect ratio

问题描述

在HTML窗口中，我设置了一个自定义正文

 < 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屋！