CODEWITHSUNDEEP
htmlcss
Yggdrasill
Yggdrasill

Reputation: 196

Two images side by side and responsive

I'm 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;
}

Upvotes: 6

Views: 15474

Answers (3)

Yggdrasill
Yggdrasill

Reputation: 196

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

#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%;
}
<div id="wrapper">
  <div id="outer">
      <div class="itemwrapper">
        <img src="http://lorempixel.com/200/100" alt="bag" />
      </div>
      <div class="itemwrapper item2">
        <img src="http://lorempixel.com/400/200" alt="pen" />
      </div>
  </div>
</div>

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

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105903

if image are same size or same ratio, you may use flex , width and min-width to set a break point:

#outer {
  width:70%;/* demo*/
  margin:auto;/* demo*/
  display:flex;
  flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
  width:100%;
  min-width:200px;/* demo*/
}
<div id="wrapper">
  <div id="outer">
    <div class="itemwrapper">
      <img src="http://lorempixel.com/200/100" alt="bag" />
    </div>
    <div class="itemwrapper">
      <img src="http://lorempixel.com/400/200" alt="pen" />
    </div>
  </div>
</div>

remove or reset to your needs the rules commented with demo.

Upvotes: 2

user4563161
user4563161

Reputation:

use display table to set it side by side and keep it side by side and responsive.

display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;

this will not only keep them the same width but also keep the containers the same height.

vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.

Any questions just fire away.

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}
#outer {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.itemwrapper {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
<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>

Upvotes: 8

Related Questions