0

I'm programming my website and I wanted to create different css for different resolutions. I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/

Everything done correctly, but when my window resizes for the narrow css, all images are big.

1 Question: How can I resize them in the css? 2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?

Thanks a lot and sorry for my bad english.

John Conde
  • 217,595
  • 99
  • 455
  • 496
Francesco Bonizzi
  • 5,142
  • 6
  • 49
  • 88
  • 1
    Answer to second question: the DOM-elements inside your container which has `display:none;` still gets loaded (you can see it in the sourceode of the page in your browser) – Seybsen Apr 17 '12 at 19:31

2 Answers2

1

Use this for resizing images 

#my_image {
  width: 50px;
  height: 100px;
}

To answer your second question, display: none just hides it. The image will be downloaded

Community
  • 1
  • 1
Elvis D'Souza
  • 2,273
  • 1
  • 23
  • 31
1

This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design

This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:

img {
 width: 100%;
}

Not super IE friendly from the sounds of it, but workarounds are explained in the article. http://unstoppablerobotninja.com/entry/fluid-images

This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

loeschg
  • 29,961
  • 26
  • 97
  • 150