发送消息气泡里图片尺寸的问题

Question

第三个对话气泡里面的图片大小应该怎么设置呢，我是按照设计尺寸做呢，还是说怎么设置。它现在是一个竖图，如果我按照设计尺寸给一个尺寸，就怕别人发的横图会被压扁。同里设置横图也会出现矛盾。

Answer 1

两个建议

1. 图片设置最大宽度， max-width: xxpx; 高度是按照图片宽度自适应的。

2. 背景图片来做，设置一个宽高都是固定值的div。

div{

    height: 200px;

    width: 200px;

    background-image: url(./img/xx.png);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}

这种方式建议也是要加判断，如果发送的是很小的图，这种方式就是失真，所以可以判断一下width和height 在渲染页面。