CODEWITHSUNDEEP
htmlcss
Niro
Niro

Reputation: 334

CSS for making an image responsive both to width and visible height of the containing element

I need the image to take the entire width of the container unless the resulting height is bigger then the available container's viewport height.

Basically I want the image to be responsive but also that it should still fit the screen. If it doesn't fit the screen it should be scaled down, horizontally centered, and preferably added with black tiles on its sides.

Currently, my CSS class looks like this:

.img-responsive{
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}

I've tried to play around with max-height on the image, or on a dedicated container, nothing seemed to do the trick by pure CSS.

Clarifications:

  1. I don't know the images dimensions in advance so can't just put them in a container with a preset size.
  2. Basically, my goal is for the images to be always fully visible on the screen (if you scroll to the image) and take up the largest possible surface.

Here's a more detailed example:

Let's say I have scrollable container with a lot of content. The container takes up the entire viewport width (let's say its 500px) and the available visible height of the container is the entire viewport height minus a navbar height (let's say 1000px).

I can't know in advance what's the container's visible dimensions as it can always change.

Inside the container there's whatever, text, images, etc.

Now, for a given image, here are possible scenarios:

Here's a JSFiddle explaining the problem

Upvotes: 4

Views: 4713

Answers (6)

DavidDunham
DavidDunham

Reputation: 1362

Here is an example with code and everything:

You can drag around the page to test.

--- When the viewport is higher / taller than the image, the image's width is the width of the viewport disregarding viewport height. On the other hand, when the viewport is wider than the image, the image uses the viewports height, disregarding its with.

#image {
  background-image: url(https://media.cntraveller.com/photos/611bedcd231ed5e8dfa34573/16:9/w_2580,c_limit/sennen-cove-beach-britain-conde-nast-traveller-20april18-rex.jpg);
    background-size: contain;
    background-position: center center;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    }
<body id="body">
<div id="image" />
</body>

Upvotes: 0

Srajan Chansoriya
Srajan Chansoriya

Reputation: 7

The best and the easiest way is to use vh and vw properties. vh when set to 100 takes up the complete Viewport Height and same goes with vw for width. Further, max height property may be added to stop image from stretching beyond its original dimensions.

Upvotes: -1

olidem
olidem

Reputation: 2121

evilgenious448 answer comes really close, just that it only works with background images. What I have is:

<html>
<head>
<style>
    body {
        margin: 0px;
    }

    .holder {
        background-image: url('image1.JPG');
        background-size: contain;
        background-position: center center;
        width: 100vw;
        height: 100vh;
        background-repeat: no-repeat;
    }
</style>
</head>
<body>
    <div class="holder">
        <div class="inner">
        </div>
    </div>
</body>
</html>

I do not know how to size the inner div equally to the image.

Upvotes: 0

user7234396
user7234396

Reputation:

Mostly what you need is to give img elements two properties {max-width:100%} and {height: auto}

If you open the snippet below in full screen and resize your window (Note: image sizes are randomly chosen)

you will see how nice they play. They adhere to the max width and they don't overstretch themselves in any direction.

I added some code in there just to make this easier to show

like making giving images {display:block} and {padding-bottom}

body {
  background: #131418;
  text-align: center;
  color: white;
  font-size: 25px;
}
body,
.image-container,
.image-container img,
.smalldiv {
  max-width: 100%;
}
.image-container img {
  height: auto;
  display: block;
  padding-bottom: 1em;
}
.smalldiv {
  /*for demnostration only */
  width: 600px;
  background: darkblue;
}
.smalldiv,
.image-container img {
  margin: 0 auto;
}
<h3>Images will always keep their aspect ratio and they will always adhere to the width of their parent containers.</h3>
<hr>

<div class="image-container">
  <h4>This is what the image container looks like when it has the entire screen space</h4>
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/650x150">
  <img src="http://placehold.it/950x150">
  <img src="http://placehold.it/1250x3150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/450x350">
  <img src="http://placehold.it/550x650">
  <img src="http://placehold.it/650x950">
  <img src="http://placehold.it/1250x1150">
</div>
<div class="smalldiv">
  <div class="image-container">
    <h4>This is what the image containing div looks when it's put inside a container smaller then the screen width</h4>
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/650x150">
    <img src="http://placehold.it/950x150">
    <img src="http://placehold.it/1250x3150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/450x350">
    <img src="http://placehold.it/550x650">
    <img src="http://placehold.it/650x950">
    <img src="http://placehold.it/1250x1150">
  </div>
</div>

Upvotes: 0

evilgenious448
evilgenious448

Reputation: 528

I would advise against using the IMG tag for this. Rather use a div tag and then use background image properties. Here is the code for this, set the container size to whatever you like:

<div id="container"></div>

<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;

</style>

background-size: contain is what is best for this. It scales the image to the largest the image can be within the div without making it larger than its native size. Hope this helps

EDIT: Forgot to add that if you want it to be in the center of the container, so that when the image doesnt fit the full size of the container there is the white space around it, you use the css code background-position: center center;

Upvotes: 4

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use height: 100% of the parent container (in my case its img-holder). And apply text-align: center to the parent. Like:

.img-holder {
  width: 100px;
  height: 100px;
  border: 1px solid #555;
  text-align: center;
}

.img-holder img {
  height: 100%;
}

Have al look at the snippet below:

.img-holder {
  width: 100px;
  height: 100px;
  border: 1px solid #555;
  text-align: center;
}

img {
  height: 100%;
}
<div class="img-holder">
  <img src="http://placehold.it/100x200" alt="">
</div>

Hope this helps!

Upvotes: -1

Related Questions