0

I am completely new to this so bare with if it's obvious.

I have three images in a row at full screen which I want to realign in accordance to the window size, i.e. go to two, then one (while always centred). The other images then being displayed underneath vertically.

This is what the code looks like (with the image location removed)

<div class="img_container"> <img id="img2" alt="" src="IMAGE">

#im1 {
display: block;
top: 250px;
background-color: white;
width: 250px;
height: 250px;
position: absolute;
left: 558px;
}

thank you!!

EFD
  • 1
  • 1

2 Answers2

0

use bootstrap and then you can call your image between;

<div class="col-sm-12 col-md-6 col-lg-4"> 

</div>

More info about col-lg/md/sm/xs

Community
  • 1
  • 1
chnselim
  • 244
  • 1
  • 3
  • 16
0

I would recommend you to use flex boxes.

Your code would look something like this:

HTML:

<ul class="flex-container">
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li>
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li>
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li>
</ul>

CSS:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

The above code snippet is based on an example taken from https://css-tricks.com/snippets/css/a-guide-to-flexbox.

seN
  • 1,045
  • 14
  • 21
  • I looked at that but it's not want I want. I don't want the images to resize or stretch at all. What I want is for the images to be aligned and upon the windows resizing (i.e. window snapped to half screen size) the images to drop/join the next row. Its driving me crazy! I feel like it isn't working because I have set the images to absolute - but how else can I position them in specific places? Thanks anyway – EFD Jun 22 '16 at 12:33