Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSResponsive full screen foreground image 'contain'

Date : 30th May 2015

For all modern browsers


click for full page image click for full page image


Information

No doubt you have seen how background images can be styled to be 'contained' and 'covered' within the parent element using CSS background-size, and some of you may have seen that you can also have a foreground image 'contained' and 'covered' within its box using CSS object-fit. BUT object-fit is not supported in any version of IE.

So I have come up with a method using viewport sizing, vw and vh, with calc to have a foreground image be contained within the browser window and also be responsive without any need for @media queries.

Just click either image above to open a full screen page with the image centered and contained within the page. The first image is in landscape format and the second portrait format

Resize your browser window when showing a full screen image to see it stay centered within the screen and maintain its aspect ratio.

I have also added a caption for each image which automatically sizes to fit the window.


You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page