所以建议使用padding属性来控制：
例如：
{
width: 35%
height: 0
padding-bottom: 35%
margin: 0 auto
}
这样可以绘制一宽度为屏幕的35%的正方形样式框，网页中直接使用此样式框并编辑框内内容即可！
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>测试页面</title>
<style type="text/css">
div {
width: 600px
text-align: center
font-size: 4em
color: #333
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
$(window).resize(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
</script>
</head>
<body>
<div>改变窗口大小试试，你会发现什么？</div>
</body>
</html>
div+css 如何让背景图片横向缩小方法
方法/步骤
1、首先，需要新建一个html页面，并在页面中写上一个div。并为div添加背景图片，为背景图片添加一些基本的样式。
2、然后，按下键盘上的F12，查看其在浏览器中的效果。效果肯定是页面中没有相应的背景图片，理由是做的是背景图片，无法将div撑起一定的高度。
3、既然不能撑起来，也不能单纯的为div设置高度，这样无法解决不同大小背景图片的问题，可以利用css中的伪元素::after或者::before
4、可以简单的解释一下，利用伪元素是将指定标签的前面或者后面的内容设为空，并设成块元素，并设定以百分比为单位的padding-bottom或者padding-top。以此撑开这个div。
5、另一种方法是，我们在有背景图片的div的内部再套一个div，然后为这个内部的div添加相应的样式，使得外层div可以被撑起来。
6、这里采用的是和第一个相同的做法，为这个内部div设定内部边距上或者下都可以。同样是以百分比作为单位。这样我们再次在浏览器中查看，就可以看到作为背景的图片了。
7、不管采用方法一还是方法二，都是设置的上下的内边距而不是外边距，并且要以百分比作为单位。
