html - 为不同的屏幕尺寸缩放 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%"。这可能会比您想要的稍宽，因此您需要在 mystyle.css

的第 126 行向包含 seattle 的 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有关如何编写此内容的信息。