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%". 这可能会比您想要的稍宽，因此您需要seattle在第 126 行向包含的 div添加边距或填充mystyle.css

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%;

查看此站点以获取有关如何编写此内容的信息。