5

I am trying to make an image fit the browser window in relation to its height and respond dynamically to window size.

I need the image aspect ratio to stay the same but the image can be ,larger than its originally resolution if viewed on large screens.

I don't want the image to spill outside of the screen and create a scolling effect.

The image must stay centered inside is container both vertically and horizontally.

Here is an example of what I am trying to achieve.

Breageside
  • 133
  • 1
  • 2
  • 8
  • 1
    `I am trying...`. Share what you are trying. This is very easy accomplished with `height: 100%; width: auto;` or with a `background-size: cover` – Marcos Pérez Gude Aug 09 '16 at 08:05
  • Try this js plugin http://johnpolacek.github.io/imagefill.js/ – Jason Aug 09 '16 at 08:07
  • 2
    @Jason that's a `background-size:cover` with `background-position: center center`. Make this two lines is better than including a plugin that depends on jQuery to write this two lines. – Marcos Pérez Gude Aug 09 '16 at 08:11

3 Answers3

19

It is not clear what you tried so far and we don't see any code. I'll try to answer anyway and perhaps it'll help you.

First of all, when you working with responsive layouts, always try to size your elements with viewport height and width. This helps you keep your content relative to the browser size - no matter if resized nor how large the screen is.

This code might help you insert a responsive image to your site:

div {
   width:80vw;
   height:80vh;
}
img {
   max-width:100%;
   height:auto;
   max-height:100%;
}

Working example here

In this example is div sized 80% of both window's height and width, so it never exceeds the viewport. Max. measures of img are 100% of the div and height:auto; secures that it preserves its aspect ratio. Image then fits a div to the max allowed. You can comfortably center the image by setting display:table-cell; vertical-align:middle; text-align:center; to the DIV.

Another solution would be:

 background-image:url(' ');
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center;

Check it out here

jordanz
  • 367
  • 4
  • 12
freewheeler
  • 1,306
  • 2
  • 12
  • 24
  • Thanks for the in depth answer. This is exactly what I'm looking for. How can I put a white margin around this div without the window starting to scroll? – Breageside Aug 09 '16 at 22:07
  • I just used the yellow background to demonstrate the relative size of the DIV to the image. Check https://jsfiddle.net/ecj81dex/5/ – freewheeler Aug 10 '16 at 05:23
  • @Breageside, u can use outline:{any-width} solid #fff; – Eggineer Jul 10 '17 at 07:07
  • 1
    @freewheeler, You saved my skin with that answer! Thanks! The combination of max-width, height and max-height does the trick. – Chidozie Nnachor Jun 30 '18 at 03:30
4

Using the object-fit CSS property, you can do it without a container:

img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
}

See the browser support.

Aidan Feldman
  • 5,205
  • 36
  • 46
0

To do something like your exemple, you can use background-size:cover.

cover

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off

Also see this plunker : https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

LW001
  • 2,452
  • 6
  • 27
  • 36
Maxouhell
  • 766
  • 9
  • 21