首页 前端知识 HTML中img图片进行等比例缩放的实例代码

HTML中img图片进行等比例缩放的实例代码

2024-05-10 08:05:15 前端知识 前端哥 508 43 我要收藏

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两个属性来达到等比例缩放图片的话也是可以的,但是要先计算一下图片的宽度和高度的比例,之后再等比例缩放。

来源:笨鸟工具

原文:html img图片等比例缩放的代码

免责声明:内容仅供参考,不保证正确性!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7797.html
标签
评论
发布的文章

JSON加密的看法

2024-05-14 23:05:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!