html 高度只有一半,怎么实现一个居中且高度是宽度一半的自适应布局

这个问题的难点应该是 高度是宽度一半的自适应

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);

});