css样式:
/* 卡片容器(核心布局控制) */
.adaptive-card {
width: 30%;
/* 占父容器90%宽度 */
max-width: 80px;
/* 最大宽度限制(避免过大) */
margin: auto;
/* 水平居中 */
background: #ffe8cc;
/* 卡片背景 */
border-radius: 8px;
/* 卡片圆角 */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0);
/* 柔和阴影 */
overflow: hidden;
/* 防止内容溢出破坏圆角 */
}
/* 图片核心自适应逻辑 */
.card-image {
width: 100%;
/* 宽度撑满包裹层 */
height: auto;
/* 高度按原始比例自动计算 */
display: block;
/* 消除行内元素底部间隙 */
object-fit: cover;
/* 图片填充方式(可选contain保持完整) */
/* 可选:限制图片最大高度(如需要) */
/* max-height: 400px; */
}
/* 标题文字(自适应高度核心) */
.card-title {
margin: 0;
/* 重置默认边距 */
color: #222;
/* 标题颜色 */
font-size: 12px;
/* 标题字号 */
line-height: 1.4;
/* 行高(保证多行可读性) */
word-wrap: break-word;
/* 长单词/数字自动换行 */
word-break: break-all;
/* 强制换行(可选,根据需求调整) */
}
例子1使用上面的css:
<div class="adaptive-card" align="center"><img src=图片链接 class="card-image"><hr><span class="card-title">标题</span></div>
例子2不用上面的css:
<p align="center"><a title=标题><img src=图片链接 style=“zoom:80%;border-radius:8px;”><span style="font-size:12px;color:#339af0;">标题</span></a></p>
用quickadd搞个脚本直接插入文本片段,爽歪歪
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
