缩放html / css图像以适应不同的屏幕尺寸？

Question

首次使用者，有一个简单但令人沮丧的问题。

我是一名新的网络编码员，设计我的网站（austinwoehrle.net）

我试图用更深的背景制作西雅图的旗帜，但是如果我放大，它就会突破div。

在较小的显示器上，图像太大，无法放入较暗的背景中。

我已经将宽度设置为100％并且尝试了很多麻烦！

感谢您的帮助！ 我的网站再次http://www.austinwoehrle.net/homepage.html

Answer 1

目前你有这个：

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

将图片的宽度更改为width="100%"。这可能会比您想要的稍微宽一点，因此您需要在seattle

的第126行的包含mystyle.css div中添加边距或填充

width:80%;
margin:0 10%;

然后将图像更改为宽度为100％并移除高度。

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

---

备注

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

查看this site，了解有关如何撰写本文的信息。