html中img图片进行等比例缩放的实例代码
原创html中img图片进行等比例缩放的实例代码
原创
用户9470376
发布于 2023-12-29 07:40:24
发布于 2023-12-29 07:40:24
img图片等比例缩放的方法
HTML中，要修改img元素定义的图片的大小，且是等比例缩放，不改变宽和高的比值，那么可以采用只设置img元素属性中width和height中的任何一个，不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
width等比例缩放img图片实例代码，及在线编辑器
为了可以与原图片的大小进行对照，下面的实例使用HTML的注释符号将等比例缩放的代码进行了注释，第一遍运行完之后，可以将第一行的代码删除（在线删除，因为这是一个在线编辑器），然后将第二行代码中的注释符号去除掉，接着再运行一遍看看等比例缩放的效果：
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->height等比例缩放实例代码
这边的代码与上面的几乎一样，只是将width的属性修改成为height的属性，如下：
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->提示：如上面的两个实例，将width和height分别设置为50%都可以等比例缩放图片，但得到的图片的大小不一定一样。
等比例缩放的另外一种方法
当然了，如果要通过同时设置img图片的width和height两个属性来达到等比例缩放图片的话也是可以的，但是要先计算一下图片的宽度和高度的比例，之后再等比例缩放。
免责声明：内容仅供参考，不保证正确性！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录