Markdown
仅自己可见
保存
Preview

CSS样式

图片指定宽长比

html
<div class="image">
    <div>
        <img src="xxx" />
    </div>
</div>

padding-top计算百分比的基数是容器的width,示例中宽高比为4:3

percentage: The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode) of the containing block. Must be nonnegative.

css
.image {
    width: 100%;
    padding-top: calc(3 / 4 * 100%); /* calc(Height / Width * Percentage%) */
    position: relative;
    overflow: hidden;
    div {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }
}

设置文本最大展示行数

html
<div class="title">xxx</div>

示例中设置最大行数为3

css
.title {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* max lines */
    -webkit-box-orient: vertical;
}
Markdown
仅自己可见
保存