htmlcssimageresizewindowed

HTML/CSS content scaling


I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW

In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.

Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)

Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.

Thanks!


Solution

  • no need to wrap the image in a div. set width & height in css. set max width and max height. there is a challenge with keeping the aspect ratio on the image. to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve. http://codepen.io/seraphzz/pen/thGkI