TypechoJoeTheme
CSS内部比例缩放技术--更灵活的图片显示

即刻学术-学术论文写作-linux前后端开发-体系结构-存储架构-分布式-VPS logo

导航
统计
登录/注册

CSS内部比例缩放技术--更灵活的图片显示

2021-01-09
/
0 评论
/
39 阅读
/
检测收录...
01/09

CSS内部比例缩放技术
CSS intrinsic ratio scaling technique

话不多说,直接看 sample:

<style>
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 42.86%;
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
</style>

<div class="ratio-container">
    <img

        data-sizes="auto"
        data-srcset="http://placehold.it/175x75 175w,
        http://placehold.it/350x150 350w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w"
        data-src="http://placehold.it/700x300"
        class="lazyload" />
</div>
您的大名:
万水千山总是情,给个打赏行不行。 打赏
打赏
朗读
赞 · 0
版权属于:

即刻学术-学术论文写作-linux前后端开发-体系结构-存储架构-分布式-VPS

本文链接:

https://ijkxs.com/archives/85/(转载时请注明本文出处及文章链接)

评论 (0)