[html+css] 邮件客户端中使用 html+css 图片被拉伸怎么办?

2020-06-19 16:48:05 +08:00
 CSGO
用 html+css 做了个邮件模版,但是发现发送出去后,有些客户端中图片被拉伸了,并不能像网页中那样按比例缩放。求大佬看看哪里错了,或者不兼容?

<style>
.wifi-img {
width: 600px;
max-width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.wifi-img img {
width: 100%;
max-width: 600px;
margin-bottom: 10px;
}
@media screen and (min-width: 1000px) {
.wifi-img {
width: 900px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.wifi-img img {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
}
</style>

<div class="wifi-img">
这里是放 img,有多少就放几个
</div>
732 次点击
所在节点    问与答
3 条回复
Szhi
2020-06-19 16:56:42 +08:00
设定图片宽和高?
serco
2020-06-19 17:01:36 +08:00
大部分 email 客户端对新的样式的支持都很差,flexbox 能不用就不用。
可以看看这个工具 https://mjml.io/
9yu
2020-06-19 17:20:38 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/683089

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX