make image responsive based on window height when width is constant

Question

Sample on CodePen: http://codepen.io/seadrag0n/pen/oxVJgX

I am learning responsive design without using libraries like bootstrap and I am facing issue when showing large images in a popup which should be both height and width responsive. I have the following snippet:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  border: 1px solid #333;
  position: relative;
  top: 50%;
}

.inner {
  width: 100%;
  height: auto;
  position: absolute;
}

.inner img {
  max-width: 100%;
  height: auto!important;
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <img src="http://www.cameraegg.org/wp-content/uploads/2015/06/Sony-RX100-IV-Sample-Images-2.jpg" />
  </div>
</div>

Using the above markup, the image is width responsive but it not height responsive and in screens of 1920 x 1080 resolution the image looks fine but when I switch to a 1366 x 768 resolution, the image overflow instead of adjusting to the screen size. How can I solve this?

I want to achieve the same styling as it is done in this plugin, if you keep width the same and reduce height of the browser window, the image adjusts to the screen size even though the width is the same.

http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — Zubair sadiq, May 12 '16 at 06:00

score 0 · Answer 1 · edited May 12 '16 at 06:06

0

Check this CodePen: http://codepen.io/uzumakinaruto1/pen/QNozyr

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer {
  max-width: 1200px;
  border: 1px solid #333;
  position: relative;
  top: 50%;
}

.inner {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
}

.inner img {
  width: 100%;
  height: 100%;
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <img src="http://www.cameraegg.org/wp-content/uploads/2015/06/Sony-RX100-IV-Sample-Images-2.jpg" />
  </div>
</div>

edited May 12 '16 at 06:06

Michael Schwartz

8,153
14
81
144

answered May 12 '16 at 05:58

UzUmAkI_NaRuTo

565
3
8
20

the image is not maintaining aspect ratio when reducing window width..the image should be both height and width responsive – seadrag0n May 12 '16 at 06:11

Zubair sadiq · Accepted Answer · 2016-05-12T06:06:48.083

0

demo

Just use height 100vh

.outer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  border: 1px solid #333;
  position: relative;
  top: 50%;
}

.inner {
  width: 100%;
  height: auto;
  position: absolute;
}

.inner img {
  height: 100vh;
  max-width: 100%;
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <img src="https://c7.staticflickr.com/3/2538/3742771246_2648fa4e6e_b.jpg" />
  </div>
</div>

edited May 12 '16 at 06:06

answered May 12 '16 at 05:59

Zubair sadiq

500
6
23

the image is no longer width responsive with `height: 100vh`, it is getting stretched when i reduce width..how to fix this in your css? I want the image to be both height and width responsive – seadrag0n May 12 '16 at 06:10
height remains the same if I reduce browser width and the image is getting stretched in the fiddle – seadrag0n May 12 '16 at 06:19
so what what is meant by responsive height and width in your case – Zubair sadiq May 12 '16 at 06:20
http://sachinchoolur.github.io/lightGallery/#lg=1&slide=0 check this link, reduce either height or width or both of your browser window and you will see that the image adjusts perfectly while maintaining the aspect ratio.. – seadrag0n May 12 '16 at 06:24

make image responsive based on window height when width is constant

2 Answers2