使用 object-fit 属性，可以指定图片的内容如何适应容器的宽高。例如，object-fit: contain 可以让图片保持原始比例并完整显示在容器内，object-fit: cover 可以让图片保持原始比例并填充整个容器，多余的部分会被裁剪

虽然这些网站提供免版税的图片，但您仍需要查看图片的许可证并遵守其条款。此外，请务必注明图片的来源，以便其他人也能找到并使用这些优质的免费图片。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

有一个Gif图片，我们想要获取它的总帧数，超过一定帧数的图片告知用户不可上传，在服务端有很多现成的库可以使用，这种做法不是很友好，前端需要先将gif上传至服务端，服务端解析完毕后将结果返回，大大降低了用户体验。

Mix-blend-mode确实适用于某些浏览器，但有团队发现它会导致chrome中的性能问题。团队的一位设计师想到了这个天才的技巧，您可以在其中创建一个几乎是透明的图层

产品提了一个需求，需要用户可以在微信或者qq截屏之后，ctrl+v直接上传图片。在element-ui中目前是无法直接支持的，需要我们监听粘贴事件，然后进行上传操作。

代码其实也非常的简单，SVG 定义一个滤镜，利用多层滤镜的叠加效果实现一个马赛克效果，然后，通过 CSS filter 引入，可以运用在任何元素上：

在实际项目中，不可避免的会遇到在页面中加载大量图片，但可能由于网络问题，或者图片文件缺失等问题，导致图片不能正常展示，并且在不同浏览器处理错误图片是不一样的

一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白

要使图片等比例展示，需要将图片宽度和高度以一个基准来计算。 padding-top用%单位时，表示占父元素宽度的百分比。基于此，将一个元素的高度用padding-top %表示时，就可以等比例展示一个元素

前几天一个简单的下载图片的需求折腾了我后端大佬好几天，最终还是需要前端来搞，开始说不行的笔者最后又行了，所以趁着这个机会来总结一下下载图片到底有多少种方法。

前端小伙伴经常会遇到页面截图或者把网页中指定的区域（某个大div）的内容转换成png的图片。这个时候常常会用到html2canvas库来实现，js真的很强大。

如果我们需要让该元素占据固定的宽高大小，而又不希望图片被拉伸变形，可以在img标签外套一个div（或其他父级元素），然后将固定的宽高加在父级元素上，这样img标签本身就可以只设定宽或高，让另一边自适应

这是支持在互联网上无损和有损图像质量压缩的新格式。谷歌公司开发这种格式专为在网上迅速和方便地做好工作。其主要优点是，相对于其他图像格式，文件小，但图像质量相似。

众所周知，一图胜千言，图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言，传输与解析一张图片的代价要远比千言大的多的多(目前上亿像素已经成为主流)。