CODEWITHSUNDEEP
css
Francesco Bonizzi
Francesco Bonizzi

Reputation: 5302

Multiple css for multiple resolutions - image resizing problems

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.

Upvotes: 0

Views: 460

Answers (2)

loeschg
loeschg

Reputation: 30581

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

Upvotes: 1

Elvis D'Souza
Elvis D'Souza

Reputation: 2313

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

Upvotes: 1

Related Questions