怎么实现自适应的这种？

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

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

img 有个特性,只写 width 的时候，高度是按比例的
所以可以用 2:1 的图片来撑开容器，剩下的就是耍点小聪明了

至于居中，这个没啥难度，你自己搞定

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .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%;}
    </style>
    <script>
    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);
    });
    </script>
</head>
<body>
<div class="base fix-clear">
    <!-- 图片是 200 * 100 全透明 PNG，所以有个最小宽度是 200，减小图片尺寸可以有更小的最小尺寸 -->
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAMAAAD0WI85AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUE1MjYwRTUzNENCMTFFOTk0REJGQjgxMUEzRjdGRkMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUE1MjYwRTYzNENCMTFFOTk0REJGQjgxMUEzRjdGRkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QTUyNjBFMzM0Q0IxMUU5OTREQkZCODExQTNGN0ZGQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QTUyNjBFNDM0Q0IxMUU5OTREQkZCODExQTNGN0ZGQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pgq2PewAAAAGUExURf///wAAAFXC034AAAABdFJOUwBA5thmAAAALElEQVR42uzBAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAPBiAgwAToQAARk4ncYAAAAASUVORK5CYII="/>
    <div class="box"></div>
</div>
</body>
</html>

.box{ position: relative; width: 200px; } .box-child{ width: 100%; height: 0; padding-top: 50%; // 居中 position: absolute; // 改成fixed也可以 top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？