如果是想适配不同设备的窗口大小,可以设置百分比。或者通过position定位,然后设置top和bottom值。再或者利用css3的flexbox布局,设置父级的display为flex,方向为纵的,然后设置其flex:1;
使html中div内的图片随屏幕大小调节的操作方法为,将div与img的宽度都设置为100%,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>图片大小自适应</title>
<style type="text/css">
div,img{ width:100%}
</style>
</head>
<body>
<div>
<img src="20150930010349.jpg" />
</div>
</body>
</html>
效果图如下:
特别说明:
要图片跟随屏幕大小显示,可以将图片与div的宽度调整为100%,并且body不设置宽度(或者也设置为100%),在使用不同屏幕浏览网页时,图片将自动铺满屏幕。
有用记得采纳
1、首先创建或者打开我们的web项目,新建一个html文件和css文件即可,如图所示。
2、html页面代码如图所示,定义一个div,然后给一个id属性即可。
3、这里是使用宽度的百分比之后,设置高度值为零,然后使用padding属性的top或者bottom的值(可以是任意百分比),背景颜色作为测试。
4、然后在浏览器运行之后的效果是这样的哦,放大缩小浏览器,宽高会随之改变。
5、这个方法是使用expression来设置高度即可。