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
How to Use Srcset and Sizes for Responsive Images
Do Ie Browsers (IE6, 7, 8) Support @Font-Face
Center Overflowing Div Inside Smaller Div
How to Load CSS Rules Dynamically in Webkit (Safari/Chrome)
Hyperlinks Showing Url with Blueprint
How to Override Gwt Obfuscated Style for Datagrid Header
Bottom-Border Hover Transition
What Does It Mean When a CSS Property Starts with a Dash
What Is Device Pixel Ratio For
Differencebetween Applying CSS Transition Property in Hover Rather Than in Its Normal State
CSS Menu - Keep Parent Hovered While Focus on Submenu
Asset Pipeline Undefined Variable SASS
Image Stretching in Flexbox in Safari
How to Find Unused CSS in a Website