How to realize an adaptive layout with a center and a height of half the width

how to achieve adaptive this?

Html5 css html
Jun.27,2022
The difficulty of

is that the height is half the width adaptive

img has a feature: when only width is written, the height is proportional
, so you can use the 2:1 picture to open the container, and the rest is to be a little clever

.

as for the center, this is not difficult, you can handle it yourself 

<!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 -sharp000;}
    .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%);
}

padding-top% defines the upper inner margin based on the percentage width of the parent element. w3c----padding-top

Previous: How do I make visual studio support the scss syntax within the style node in the .vue file?

Next: Es6 project builds webpack-stream-No files given; to report errors, ask seniors to advise orz.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu