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

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 在渲染页面。

Answer 2

用img标签，只设定宽度让高度自适应（图片会等比例缩放），或者高度固定（宽度自适应）

Answer 3

这种APP的图，一般都是传到服务器上，生成原比例的小图；这个小图定宽的～比如200px，这样你的页面实现上，img的width都是200px；只是高度不确定，CSS代码：

img{
    display:block;
    width:200px;
    height:auto;
}

这样就搞定了；

Answer 4

气泡设置最大宽度，然后用padding控制边上的空白
图片直接用img，设置最大宽度，高度自适应就可以了