Responsive Image Full Screen and Centered - Maintain Aspect Ratio, Not Exceed Window

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;" >

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).

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
object-fit: cover;
width: 50px;
height: 100px;
}
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

How to maintain responsive background image height while changing screen width?

You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.

You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.

Here's an example using your CSS settings (except see caveat below):

* {
margin: 0;
padding: 0;
}

html {
--imgw: 1391;
--imgh: 2471;
width: 100vw;
min-height: calc(100vw * var(--imgh) / var(--imgw));
/* make sure the whole height of the image is always shown */
background-image: url(https://picsum.photos/id/1015/1391/2471);
background-size: cover;
}
HELLO

Maintain aspect ratio according to width and height

The aspect-ratio property (2022)

To maintain the aspect ratio of a div according to width and height, you can use the aspect-ratio property (MDN reference).

This allows you to maintain any aspect ratio according to the viewport size or to the size of the parent element.

Maintaining aspect-ratio according to the viewport size (width and height) :

.ar-1-1 {
aspect-ratio: 1 / 1;
background: orange;
}

.ar-1-19 {
aspect-ratio: 16 / 9;
background: pink;
}

div {
max-width: 100vw;
max-height: 100vh;
margin-bottom: 5vh;
}

/** For the demo **/

body {
margin: 0;
}
<div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div>

Centered fluid image with fixed aspect ratio and cropping - 2 overlayed divs

I've altered your Fiddle so that no image is needed. I've changed almost all the code, but what I've basically done, is add a container that will always have the perfect width of max-width: calc(100vw - 60px) and a width of calc(150vh - 180px) (1.5 times what the max-height should be and accounting for the header, footer and the margins).

Then I gave #imagem a padding-bottom of calc(100% / 1.5), meaning that it will get exactly the same height as width, but divided by 1.5 (resulting in a ratio of 2:3.

Hope this solved your problem



Related Topics



Leave a reply



Submit