前端如何处理图片宽高"缩小"？？

最近在做一个即时聊天的项目，就是说在前端如何将从后台获取到的图片变小，不要原始像素显示

在这里我的图片宽高像素是写死的，应该按照常理来说，例如微信的那种发送图片像素应该是不固定的，类似于等比例的那种，但是使用CSS3 transform属性缩放，但还是占位置的，怎么解决有哪位大神告知一下

回答

fill

默认，不保证保持原有的比例，内容拉伸填充整个内容容器。

contain

保持原有尺寸比例。内容被缩放。

cover

保持原有尺寸比例。但部分内容可能被剪切。

none

保留原有元素内容的长度和宽度，也就是说内容不会被重置。

scale-down

保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

initial

设置为默认值，关于 initial

inherit

从该元素的父元素继承属性。关于 inherit

不设置宽高默认 auto
只设置max-height、max-width