Yggdrasill Yggdrasill - 6 months ago 32
CSS Question

Two images side by side and responsive

Im trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser.
I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....

The html:

<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>


The css:

#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}

.itemwrapper {
display: inline;
}

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


Can anybody help?

Answer

Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:

the html:

<div id="wrapper">
  <div id="outer">
      <div class="itemwrapper">
        <img src="item1.jpg" alt="bag" />
      </div>
      <div class="itemwrapper item2">
        <img src="item2.jpg" alt="pen" />
      </div>
  </div>
</div>

the css:

#outer {
    position: relative;
    width: 50%;
    height: 0;
    margin: 30px auto 0 auto;
    padding-top: 25%;
    background-color: #999;
}

.itemwrapper {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}

.item2 {
    left: 50%;
}

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

This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.

Comments