将html / css图片缩放为不同的屏幕尺寸？

Question

First time user, with a simple but frustrating problem.

I am a new web coder, designing my website (austinwoehrle.net)

I am trying to make the banner of Seattle scale with my darker background, but if I zoom in, it breaks out of the div.

On smaller monitors the image will be too large to fit in the darker background.

I have already set the width to 100% and have tried a lot of trouble shooting!

Thanks for the help! Again, my website is http://www.austinwoehrle.net/homepage.html

Answer 1

At the moment you have this:

<div id="seattle" alt="test">
    <img src="seattle.jpg" width="620" height="210"> 
</div>

Change the width of your image to width="100%" . This may then be slightly wider than you want it, so you will want to add margin or padding to the containing seattle div on line 126 of mystyle.css

width:80%;
margin:0 10%;

Then alter your image to have a width of 100% and remove the height.

<img src="seattle.jpg" width="100%"> 

---

Notes

 margin:0 10%;
 //is equal to writing
 margin-top:0;
 margin-right:10%;
 margin-bottom:0;
 margin-left:10%;

Check out this site for information on how to write this.