这篇文章主要介绍了html图片如何等比例缩放,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
<强>首先我们先看看img图片如何等比例缩放:
在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决? CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决。
<强> html img标签图片缩放的解决方法有两种:
一,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。
比如淘宝,要求店铺主上传产品封面图片是正方形的,为什么,因为图片宝贝展示列表都是正方形的排版布的局,这样要求上传合适正方形宝贝封面图片,也是让图片不变形。
所以有条件的情况下,大家将首页,图片列表页的布局宽度高度保持一致,上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。
二、使用CSS max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。
以下DIVCSS5通过实例对比方法让大家掌握CSS控制图片缩小不变形技巧。
<强>接下来看关于html img图片缩放的案例:
这里有个DIV盒子(DIV类命名为“tupian") CSS宽度和CSS高度方便为300 px和100 px同时设置1 px黑色边框,里面放了一张图片(图片原始宽度650 px为高度为406 px)。并通过CSS固定死图片宽度高度。
<强>关于html img标签图片缩放的全部代码: