Fork me on GitHub

Raf testen van

580 bytes of HTML by raf

123456789101112131415161718192021222324252627282930313233343536
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
   background-color: red;
   position: relative;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.text {
   position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 20px;
   color: white;
}
</style>
</head>
<body>

<h2>Maintain Aspect Ratio 16:9</h2>
<p>Resize the window to see the effect.</p>

<div class="container"> 
  <div class="text">16:9 Aspect ratio</div> 
</div>

</body>
</html>