怎样使图片的大小随网页变化,但是图片不变形呢?

怎样使图片的大小随网页变化,但是图片不变形呢?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.header{

width: 100%;

height:100px;

position:absolute;

background: transparent;

}

.header img{

width: 172px;

height: 84px;

margin-top: 10px;

margin-left: 20px;

float:left;

}

.nav{

float: right;

}

.nav ul li{

float: left;

list-style: none;

font-size: 20px;

font-weight: bolder;

margin-left: 20px;

margin-right: 20px;

line-height: 84px;

color: #858585;

}

.res-img{

width: 100%;

height:720px;

}

.res-img img{

width: 100%;

height: 720px;

}

</style>

</head>

<body>

<div>

<div class="header">

<img class="logo" src="knowU\img4.png" alt="logo" />

<div class="nav">

                <ul>

<li>&lt;</li>

<li>YOU</li>

<li>联系我们</li>

<li>客户端下载</a></li>

<li>&gt;</li>

</ul>

</div>

</div>

<div  class="res-img">

<img src="knowU\img2.jpg" width="1280px" height="720px" />

</div>

</div>

<div>

     

</div>

<div></div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2018-03-18 10:26:12

可以只设置图片宽度为百分比,高度不用设置,保持图片的宽高比不变即可。

  • 提问者 慕神5083390 #1
    除了第一张图片,其他图片都有效果,第一张图片就是是有导航固定的那张图片qAq
    2018-03-20 23:11:39
  • 好帮手慕星星 回复 提问者 慕神5083390 #2
    因为第一张图片logo图没有自己的父元素,它的直接父元素为header,所以建议在logo外面添加一个div盒子,设置固定宽度,给logo图片设置百分比即可,自己测试一下。
    2018-03-21 09:14:52
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师