Make an image always display fully and responsively inside a fixed container?

Question

I have the following html:

<div class="me">
    <img src="IndianRemovalAct-final.jpg">
</div>

and the following styles:

.me {
  position: fixed;
  height: 100%;
  width: 100%;
}

/* method 1*/
img {
  width: 100%;
  height: auto;
}

/* method 2*/
img {
  width: auto;
  height: 100%;
}

I tried the above two ways to make the image responsive. However, if I make the browser narrower or shorter, part of the image is outside the viewport. I want to display the image fully and responsively inside its fixed-positioned container. The image is quite big and I am just doing the implementation.

have you tried setting the max-width to 100%? this will limit it to the containers width — wdfc, Aug 30 '16 at 16:11
set it as the background image for the container and use back-position and background-size css attributes? Either way, when you set 1 attribute to 100% and the other to auto, it will constrain the image. This means that, depending on your window size, you're probably going to get whitespace — VikingBlooded, Aug 30 '16 at 16:14
I cannot do it as background image because of other reasons. — curious1, Aug 30 '16 at 16:14
Making max-width: 100%; height: auto; is not working. I tested it. — curious1, Aug 30 '16 at 16:15
whats happening? your image is leaking outside of the viewport? you can set your div to the width of the actual file if it is not enormous. if it is leaking, it is because your container is set to 100%, so it is taking the entire width of the photo. You can resize your photo or set the width in px. — wdfc, Aug 30 '16 at 16:18

score 3 · Answer 1 · answered Aug 30 '16 at 16:22

3

I went a different route since I'm assuming that you want to maintain the aspect ratio of the image:

.me {
      position: fixed;
      height: 100%;
      width: 100%;
      background: url('http://placehold.it/350x150') no-repeat center center fixed; 
      background-size: cover;
    }

<div class="me"></div>

Example: http://jsbin.com/woqijaxoqu/edit?html,output

answered Aug 30 '16 at 16:22

Steve

11,596
7
39
53

1

Since you can't use a background image, are you looking to maintain the aspect ratio of the image or do you want it to scale with the same aspect ratio as the browser window? – Steve Aug 30 '16 at 16:25
Yes, I want to maintain the aspect ratio and fully display the image inside the fixed container responsively. – curious1 Aug 30 '16 at 16:29

score 1 · Answer 2 · answered Aug 30 '16 at 16:14

1

is what I'm suggesting what you want?

<div class="me">
    <img src="https://unsplash.it/900/900">
</div>

.me {
  position: fixed;
  height: 100%;
  width: 100%;

}

img {
  max-width: 100%;
}

answered Aug 30 '16 at 16:14

wdfc

374
4
9

I tested it. It is not working. If you shrink and enlarge the browser in all directions/sizes, you will see that. Thanks for chiming in! – curious1 Aug 30 '16 at 16:17
1

Oh, the narrow/shorter, didn't see that, totally my bad. Just add max-height:100% -- Have you tried flex-box? – wdfc Aug 30 '16 at 16:23

curious1 · Answer 3 · 2016-08-30T16:27:19.157

1

Here is the solution that seems working. Based on input from responses to my post.

    img {
        max-width: 100%;
        max-height: 100%;
    }

This solution was based on folks suggesting "max-".

Thank you, SO folks!

edited Aug 30 '16 at 16:27

answered Aug 30 '16 at 16:25

curious1

14,155
37
130
231

1

There is also a good solution here using flexbox. http://stackoverflow.com/questions/21103622/auto-resize-image-in-css-flexbox-layout-and-keeping-aspect-ratio – wdfc Aug 30 '16 at 16:26
1

No worries good luck! images are a pain in the butt. I would suggest editing the size if it is huge haha :) – wdfc Aug 30 '16 at 16:28

Make an image always display fully and responsively inside a fixed container?

3 Answers3