Simple as possible (snippet series).

Center Responsive Homothetic Block Without flex-box.

This is the simplest solution I've found to center an homothetic block (geometrically similar) in a page.

Do you know a simplest solution ? Please comment !

Compatible IE9 and more. CSS (SCSS) Solution. JavaScript free.

Next post: Center Responsive Homothetic Block With Flex Box. (Soon)

Edit variables for your need :

For 16/9 :

  $page-horizontal-ratio: 16;
$page-vertical-ratio:  9;

For A4 (Landscape)

  $page-horizontal-ratio: 297;
$page-vertical-ratio:  210;

Code SCSS

  // Variables 
$page-margin: 5%; 
$page-width: 100 - (2*$page-margin);
$page-horizontal-ratio: 16;
$page-vertical-ratio:  9;

$page-ratio:  ($page-vertical-ratio/$page-horizontal-ratio)*100%;

// Center Responsive Homothetic Block 
.warpper {
  margin: ($page-margin) auto;
  width: $page-width;
  position: relative;
  &:after {
    padding-top: $page-ratio;
    display: block;
    content: '';
  }
}

.page {
    background-color: white; 
    color: #4F4E68;
    padding: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
 }


Code CSS

  
.warpper {
  margin: 5% auto;
  width: 90%;
  position: relative;
}
.warpper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.page {
  background-color: white;
  color: #4F4E68;
  padding: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
}


Homothety and uniform scaling: Homothetic transformation

Autre Planete Design Studio


302 1 0