Responsive Design: Centralize a Full-Screen Square in Any Screen Size

Responsive design: centralize a full-screen square in any screen size

Here's my attempt to achieve the end goal.

The key point is to use vmin viewport percentage length for both width and height properties of the square box:

Example Here

.body, .square {
  display: flex;
  align-items: center;
  justify-content: center;
}

.body {
  min-height: 100vh;
}

.square {
  width: 100vmin;
  height: 100vmin;
}

(vendor prefixes omitted for brevity, check the "Compiled View" in the demo).

Maintain aspect ratio of div but fill screen width and height in CSS?

There is now a new CSS property specified to address this: object-fit.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

The feature is widely supported by now (http://caniuse.com/#feat=object-fit).

How to style a div to be a responsive square?

Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

Is there a method to set the width of a div to its height in CSS?

If you aim to set its height to the viewport height, you can as well set its width to the viewport height:

.square {
  height: 100vh;
  width: 100vh;
}

In case you're not familiar with this unit: 1vh represents one percent of the view height.

Edit: depending on how responsive you want your design to be, you can also make use of the 1vmin unit, which represents 1 percent of the smallest side of your screen.

.square {
  height: 100vmin;
  width: 100vmin;
}

Regardless of whether your website is viewed in portrait or landscape mode, the square will always max out its size without causing the page to scroll.

Make video fit 100% with any screen resolution

Found a good solution here: http://codepen.io/shshaw/pen/OVGWLG

So your CSS would be:

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

HTML:

<div class="video-container">
  <video>
    <source src="~/Videos/myvideo.mp4" type="video/mp4" />
  </video>
</div>

Responsive Image full screen and centered - maintain aspect ratio, not exceed window

To center it, you can use the technique shown here: Absolute centering.

To make it as big as possible, give it max-width and max-height of 100%.

To maintain the aspect ratio (even when the width is specifically set like in the snippet below), use object-fit as explained here.

.className {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

<img src="https://i.imgur.com/HmezgW6.png" class="className" />

<!-- Slider to control the image width, only to make demo clearer !-->
<input type="range" min="10" max="2000" value="276" step="10" oninput="document.querySelector('img').style.width = (this.value +'px')" style="width: 90%; position: absolute; z-index: 2;" >

Is it possible to center a image and resize the image according with the screen resolution?

You can do it like this (bare minimum):

html, body {margin: 0; height: 100%}
img {  display: block; /* removes bottom margin/whitespace */  margin: 0 auto; /* you probably only want to center it horizontally */  max-width: 100%; /* horizontally responsive */  max-height: 100%; /* vertically responsive */}

<img src="http://placehold.it/1080x1080" alt="img">

css flex 2x2 grid full screen with centered images view crop

Perhaps this may help, although I'm not entirely sure if I fully understand your request.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
    }
    .container {
        display: flex;
        flex-flow: row wrap;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
    .child {
        /* FOR 4 IN A GRID */
        flex: 1 0 50%;
        max-width: 50%; 
        max-height: 50%;

        /* FOR YOUR 4 IN 1 ROW */
        /* flex: 1 0 25%;
        max-width: 25%; */

        /* FOR BOTH */
        padding: 5px;
        object-fit: none;
    }
    .child:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
  </div> 
</body>
</html>

Updated Version

It's up to you to to add in media queries to set the size of the container itself.

---

Related Topics