84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
第三个对话气泡里面的图片大小应该怎么设置呢，我是按照设计尺寸做呢，还是说怎么设置。它现在是一个竖图，如果我按照设计尺寸给一个尺寸，就怕别人发的横图会被压扁。同里设置横图也会出现矛盾。
学习是最好的投资！
两个建议
图片设置最大宽度， max-width: xxpx; 高度是按照图片宽度自适应的。
背景图片来做，设置一个宽高都是固定值的p。
p{ height: 200px; width: 200px; background-image: url(./img/xx.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
这种方式建议也是要加判断，如果发送的是很小的图，这种方式就是失真，所以可以判断一下width和height 在渲染页面。
用img标签，只设定宽度让高度自适应（图片会等比例缩放），或者高度固定（宽度自适应）
这种APP的图，一般都是传到服务器上，生成原比例的小图；这个小图定宽的～比如200px，这样你的页面实现上，img的width都是200px；只是高度不确定，CSS代码：
img{ display:block; width:200px; height:auto; }
这样就搞定了；
气泡设置最大宽度，然后用padding控制边上的空白图片直接用img，设置最大宽度，高度自适应就可以了
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
两个建议
图片设置最大宽度， max-width: xxpx; 高度是按照图片宽度自适应的。
背景图片来做，设置一个宽高都是固定值的p。
这种方式建议也是要加判断，如果发送的是很小的图，这种方式就是失真，所以可以判断一下width和height 在渲染页面。
用img标签，只设定宽度让高度自适应（图片会等比例缩放），或者高度固定（宽度自适应）
这种APP的图，一般都是传到服务器上，生成原比例的小图；这个小图定宽的～比如200px，这样你的页面实现上，img的width都是200px；只是高度不确定，CSS代码：
这样就搞定了；
气泡设置最大宽度，然后用padding控制边上的空白
图片直接用img，设置最大宽度，高度自适应就可以了