问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
呼啦啦
    39317150207

    怎么实现自适应的这种？

    htmlcsshtml5
    阅读 4.2k
    2 个回答
    得票最新
    头像
    Fractal
      5.5k22433

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

      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>
      头像
      我在长安长安
        1.2k516
        .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%);
}

        padding-top % 定义基于父元素宽度的百分比上内边距。w3c----padding-top

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        被 1 篇内容引用
        推荐问题