图片链接 html加标题😀

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搞个脚本直接插入文本片段,爽歪歪
:grinning::grinning::grinning::grinning::grinning::grinning::grinning::grinning::grinning:

应用后得到什么样的效果呢

就这样的效果

不用css代码例子的效果