这个问题的难点应该是 高度是宽度一半的自适应
img 有个特性,只写 width 的时候,高度是按比例的
所以可以用 2:1 的 图片来撑开容器,剩下的就是耍点小聪明了
至于居中,这个没啥难度,你自己搞定
Title.fix-clear:after {content:'\200B';clear:both;height:0;visibility:hidden;display:block;}
.base {position:relative;display:inline-block;box-shadow:0 0 2px 0 #000;}
.base .box {background-color:rgba(255,0,0,0.5);}
.base img {float:left;margin-right:-100%;width:100%;}
document.addEventListener('DOMContentLoaded', function(){
let domBox = document.querySelector('.base .box');
function update()
{
let txt = '一二三四五六七八九十百千万亿兆京垓秭穰沟涧正载极恒河沙';
let cnt = Math.floor(5 + (Math.random() * 20));
domBox.innerHTML = txt.substr(0, cnt);
setTimeout(update, 1000);
}
setTimeout(update, 0);
});