CSS Skalierung angegeben Pixel Dynamic

Question

body { 
 
    margin: 0; 
 
    background-color: #2196F3; 
 
} 
 

 
.outer { 
 
    height: 100vh; 
 
} 
 

 
.inner { 
 
    width: 500px; 
 
    height: 1000px; 
 
    position: relative; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    background-color: #FF5722; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

Wie fit innere div mit spezifischen Pixel auf den Bildschirm Höhe oder Breite mit CSSdie gleichen Bewahrungsverhältnis?

Answer 1

Like this ?:

body { 
 
    margin: 0; 
 
    background-color: #2196F3; 
 
} 
 

 
.outer { 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 

 
.inner { 
 
    width: calc(100% - 40px); 
 
    height: calc(100% - 40px); 
 
    background-color: #FF5722; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>