CSS to Make Images Resize and Fit Any Screen the Same

CSS to make images resize and fit any screen the same

I think it is fundamentally impossible to achieve what you are trying to do without losing image ratio, which is probably undesirable. Have you considered using the 'background-size' property? The css below achieves a pretty good look:

body {
    background: url('images/example.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

You can see it here: http://jsfiddle.net/DTN54/

How to resize an image to fit in the browser window?

Update 2018-04-11

Here's a Javascript-less, CSS-only solution. The image will dynamically be centered and resized to fit the window.

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html>

The [other, old] solution, using JQuery, sets the height of the image container (body in the example below) so that the max-height property on the image works as expected. The image will also automatically resize when the client window is resized.

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit { /* set relative picture size */
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html>

Note: User gutierrezalex packaged a very similar solution as a JQuery plugin on this page.

How do I get two images to fit any screen size in html?

You can try the vw (view width) and vh (view height) size for the height to use 50% of the whole view height by each of the 2 pictures. To fit the scale factor just set width to auto and the browser resizes the width so that the scale factor is same:

img {
    height: 50vh;
    width: auto;
}

How to fit an image according to screen size

if you want to keep aspect ratio then put width:100% and height:auto

if you want to cover whole parent element then height:100% and width:100%

Resize constantly-changing image to fit size-changing screen, using CSS

I think this layout structure hits all of your requirements. There are three images of varying size in here I took the opacity down so you can see how they all scale together.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        body {
            margin: 0;
        }

        .images {
            position: relative;
            height: 100%;
        }
    .image {
        position: absolute; 

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;

        width: 100%;
        height: 100%;

        opacity: 0.5;

    }
    .image-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.footer {
    background-color: black;
    color: white;
    height: 50px;
    width: 100%;
    margin-top: auto;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="images">
            <div class="image-container">
                <div class="image" style="background-image: url(https://unsplash.it/1000/425)"></div>
                <div class="image" style="background-image: url(https://unsplash.it/640/1000)"></div>
                <div class="image" style="background-image: url(https://unsplash.it/800/800)"></div>
            </div>
        </div>
        <div class="footer">Content</div>
    </div>
</body>
</html>

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

How to make an image auto resize to fit browser window with relation to height

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

Automatically resize images with browser size using CSS

To make the images flexible, simply add max-width:100% and
height:auto. Image max-width:100% and height:auto works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
add width:auto\9 for IE8.

source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

for example :

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

and then any images you add simply using the img tag will be flexible

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

CSS to Make Images Resize and Fit Any Screen the Same