好吧,那我弱弱的问个问题。如何使得一张图片自适应屏幕宽高?
我把自己的 demo 贴出来吧
<!DOCTYPE html>
<html lang="en" xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--适配移动端 开始-->
<meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no"> <!--忽略将页面中的数字识别为电话号码-->
<meta name="format-detection" content="address=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!--离线应用-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--隐藏状态栏-->
<!--适配移动端 结束-->
<title>全屏广告测试</title>
<style type="text/css">
/*CSS 样式初始化 开始*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
/*CSS 样式初始化 结束*/
/*@media screen and (max-width:480px){
img {
width:100%;
height:480px;
}
}
@
media screen and (min-width:320px) and (max-width:480px){
img {
width:100%;
height:200px;
}
}*/
img{
width:100%;
height:100%
}
</style>
<script type="text/javascript">
//alert(window.screen.width);
//alert(window.screen.height);
</script>
</head>
<body>
<img alt="广告页面" src="E:\Web 前端\Bootstrap 以及模板\Matericak_Picture\Design-Quotes18.jpg">
</body>
</html>