CODEWITHSUNDEEP
htmlcss
milk
milk

Reputation: 434

Scale images in div according to browser size

I'm trying to create a centered div with 2 images, side by side, and have the one on the right jump under the first image when the browser scales down. And for all of it to be centered.

I tried doing it using divs but I'm stuck and can't figure out if what I'm doing is even correct. Right now the images don't scale down.

Here's a fiddle with my code: http://jsfiddle.net/v5dejopw/1/

.wrapperlookbook {  
overflow:hidden;
width: 1200px;
margin:0 auto;
padding-top: 60px;
}

#onelookbook {  
float:left; 
width:585px;
}
#twolookbook { 
background-color: #fff;
overflow:hidden;
min-height:600px; 
width:585px;
}

@media screen and (max-width: 600px) {
#onelookbook { 
 float: none;
margin-right:0;  
  }
}

img {
max-width:100%
}

Can anyone point me in the right direction?

Thanks!

Upvotes: 1

Views: 154

Answers (3)

BernieSF
BernieSF

Reputation: 1828

I think work with bootstrap is a good option for you, since bootstrap takes care of the resizing of every element.

First, download the latest version of bootstrap from: http://getbootstrap.com/getting-started/#download

next, reference the files in the head 

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />

then, add a couple of div in your body

<body> 
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
      <img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
      <img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
  </div>

What means this? Bootstrap works in 12-column mode. In this case, I made two with width 6 each (50%) for resolutions xs (extra small), sm (small), md(medium) and lg(large). Bootstrap will resize the divs depending on device resolution, and, if you resize the browser, the page will be resized accordingly.

This is only a basic example, but can help you as start point to use bootstrap.

Upvotes: 1

Matej Đaković
Matej Đaković

Reputation: 880

My sugestion is add this in your code: if want in one line:

.wrapperlookbook { 
    max-width: 1200px;
    width: 100%;
}

#onelookbook {
    width: 50%;
}

#twolookbook {
    width: 50%;
}

If want in two line:

@media screen and (max-width: 600px) {
  #onelookbook { 
     width: 100%;
  }
  #twolookbook { 
     width: 100%;
  }
}

Good luck!! ;)

Upvotes: 1

gr3g
gr3g

Reputation: 2914

The problem was about width of your elements. Check it out here:

.wrapperlookbook {  
  overflow:hidden;
  width: 400px;
  margin:0px;
    margin: auto;
  padding-top: 60px;
    border: 1px solid green;
}

#onelookbook {  
  float:left; 
  width:200px;
}
#twolookbook { 
  background-color: #fff;
  overflow:hidden;
  min-height:600px; 
  width:200px;
}

@media screen and (max-width: 600px) {
   #onelookbook { 
    float: none;
    margin-right:0;  
  }
}
  
img {
    max-width:100%
}
<div class="wrapperlookbook">
    <div id="onelookbook">
      <a href="#">
          <img src="http://placehold.it/585x600" width="585" style="max-width:100%;height:auto;"></a></div>
    <div id="twolookbook">
      <a href="#">
          <img src="http://placehold.it/585x600/c0c0c0" width="585" style="max-width:100%;height:auto;"></a></div>
  </div>

Ps: I decreased the width here

Upvotes: 1

Related Questions