老师 缩放窗口 图片变形了 图片怎么样才能不变形和自适应屏幕宽度
来源：5-2 作业题
鹿人神经粉
2019-07-26 21:35:35
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="zy.css" type="text/css">
</head>
<body>
<header>
<div class="container">
<a href=" ">< img src="img/logo.jpg"> </a >
<nav>
<a>HOME</a >
<a>PORTFOLIO</a >
<a>TEAM</a >
<a>CONTACT US</a >
</nav>
</div>
</header>
<section >
<div class="banner" >
<a href="#">< img src="img/banner.jpg" alt=""></a >
<h1>Welcome to Website</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p >
</div>
</section>
<section>
<div class="Portfolio">
<h1>Portfolio </h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et</p >
<p>dolore magna aliqua.Ut emim ad minim veniam</p >
<p class="span">
<span>ALL</span>
<span>WEB</span>
<span>SOFTWARE</span>
<span>WORKS</span>
<span>BRANDS</span>
</p >
<a>< img src="img/portfolio-nav-img.jpg" alt=""></a >
</div>
</section>
</body>
</html>
*{padding: 0;margin: 0;border:0;}
header{height:80px;background:#2e2e2e;}
header>.container{width:1500px;margin: 0 auto;}
/*header>.containe这里设置width:1500px;窗口变小文字就不会挤下去*/
header>.container>a{margin-top:1px;float: left;width:139px;height:28px;line-height:88px;}
/*这里要写a 不能写img*/
nav{
float: right;color: white;
}
nav>a{
font-size: 24px; line-height: 80px;float: left; width: 190px; height: 80px; text-align: center;display: block;
}
.banner{}
.banner>a{display: block;background: #BA87E5;position: relative;}
.banner>a>img{width:100%;display: block;height:900px;}
/*img要加display:block; 不加也不会有多大的影响*/
.banner>h1{position: absolute;top:40%;left:33%;font-size: 50px;color:white;font-family: basic; letter-spacing:8px;width:1500px;}
.banner>p{position: absolute;top:47%;left:37%;font-size: 15px;color:white;font-family: basic;letter-spacing:2px;margin-top:15px;width:1000px;}
1回答
-
樱桃小胖子
2019-07-27
目前阶段同学实现在电脑端正常显示即可，不需要做屏幕适配，到后面学习了移动端的时候，会有详细的适配方法的讲解哦，目前阶段可以设置一个min-width最小宽度，也就是当页面缩小到一定程度后，就不在缩小，这样可以保证图片和网页正常显示
希望可以帮到你！
0
相似问题