AquilaX's development blog » css http://dev.horemag.net code and so on... Thu, 02 Feb 2012 08:29:50 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Show images depending on the browser’s width with CSS only http://dev.horemag.net/2009/01/20/show-images-depending-on-the-browsers-width-with-css-only/ http://dev.horemag.net/2009/01/20/show-images-depending-on-the-browsers-width-with-css-only/#comments Tue, 20 Jan 2009 15:33:55 +0000 AquilaX http://dev.horemag.net/?p=66 I had the make promo offers sections form our site. Usually this is an easy task but the requirement on this case was to preserve the full page width design and keep the page usable for 600px wide screens.

So let's start with the HTML portion.

 
<div id="top_offers">
  <a href="#"><img src="1.png" alt="image 1"/></a>
  <a href="#"><img src="2.png" alt="image 2"/></a>
  <a href="#"><img src="3.png" alt="image 3"/></a>
  <a href="#"><img src="4.png" alt="image 4"/></a>
  <a href="#"><img src="5.png" alt="image 5"/></a>
</div>
 

The HTML will render as this:
Screen Shot 1

Let's add a little css to get the desired effect:

 
  #top_offers{
    height: 190px;
    background-color: #d3d7cf;
    overflow: hidden; /* hide the excess images*/
    text-align: justify; /* or center here */
  }
  #top_offers a img{
    margin: 20px;
    border:none;
  }
 

Which brings the following results:
Screen Shot 2

Screen Shot 3

You can play with the example here.

]]> http://dev.horemag.net/2009/01/20/show-images-depending-on-the-browsers-width-with-css-only/feed/ 0