Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

一些元素的自动等比缩放

  当我们对IMG元素在样式上设置宽度或高度时,其整体尺寸就会随着一边的固定而被等比缩放。比如高度为300宽度为150的图片,当在CSS中把它的宽度设置为100时(直接使用IMG标签上的width和height属性没有等比缩放的效果),其高度也会自动缩小到50。
<base href="http://www.web-tinker.com/" />
<div>
  <select id="pro"><option>width</option><option>height</option></select>
  <input id="val" type="range" min="50" max="600" />
</div>
<img src="/images/lena_std.png" id="img" />
<script>
pro.onchange=val.onchange=change;
change();
function change(){
  img.style.cssText=pro.value+":"+val.value+"px";
};
</script>
  IMG元素的等比缩放是按照其内容来计算的,图片的内容,而IMG标签上的width和height属性表示对IMG内容尺寸的绝对操作,而且它们也会带来样式上的影响,所以这两个属性设置时图片将不再等比缩放。
  另外,除了图片,CANVAS也有同样的性质,但SVG则没有。我不知道这些设计背后的逻辑,但我觉得这些东西都应该是在程序上可控的。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^