我们在布局图片列表时，通常我们要控制图片的高度和宽度这样来达到图片统一。我们在html布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽。
一、html img图片标签高度宽度设置
我们可以直接在图片标签设置宽度width和高度height，这里需要注意的是HTML img标签内直接设置宽度和高度值不需要html单位，默认为PX像素。
<img src="1.jpg" width="150" height="60" />img标签内设置高度宽度优点直观，对于文章内插入图片可以利用此方法控制设置图片高度宽度；缺点，如果图片列表排版的这样会增加很多HTML代码，不便统一修改。
二、css样式控制width、height
语法：
img{
width:150px;
height:60px
}这里设置CSS宽度为150px,css高度为60px,注意是CSS样式中css width和css height的值都带单位也要记住一定带上单位，这里和HTML img标签内设置高度宽度不带单位一定区别大家一定注意并记住此知识点。
如果是我们直接对img设置样式，这样会将整个网页中图片宽度高度控制了。为了控制指定对象内的图片宽度高度样式，我们通常在img前加上对象CSS命名。
示例：
我们在一个HTML中放图片，1张为原始大小图片，1张为通过CSS设置宽度和高度图片，通过2张图片对比分析通过CSS改变图片大小。
<!DOCTYPE html>
<html>
<head>
<title>css控制图片大小在线演示</title>
<style>
.divcss img{ width:300px; height:100px}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<p><img src="1.jpg"><br>
本身这个图片宽度为3840px高度2160px</p>
<p><strong>通过CSS改变设置图片大小</strong></p>
<div >
<img src="1.jpg"><br>
这里设置divcss盒子里图片宽度300px高度100px
</div>
</body>
</html>原生Js对文件类型的判断，判断文件是图片，视频等格式
在我们开发中，会遇到这样的场景：1.服务器返回Json数据，根据数据类型来显示是图片还是视频。2.前端上传文件，需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型
前端图片懒加载的实现，采用Lazy Load 图片延迟加载提高用户体验
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
web前端图片加载优化，从图片模糊到清晰的实现过程
在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现呐？默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图
lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件
当你的网站使用了大量图片时候，如果一次性全部加载，那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题，它可以实现图片的延迟加载【懒加载】
js实现图片局部放大效果
图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。
网站图片优化的重要性与技巧方案
网站图片优化技巧：1、图片名包括关键词，2、Alt标签包括关键词，3、图片周边文本包括关键词，4、GLF和JPGE图画优化，5、在图片链接中运用锚文本关键字
css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果
前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢？
原生js 生成海报图_利用canvas合成图片的实现方法
目前浏览器对html5的支持越来越好，我们现在不用服务器端，直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图
网页中默认图片的几种解决方式
现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢？下面给出几种方式
h5移动端禁止长按图片保存
在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!