<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>div中放置图片</title><link rel="stylesheet" href="liu.css"/></head><body><div class="center"><img src="./image/1.jpg"rel=""/></div></body></html>
css代码如下：
*{
margin: 0
padding: 0
}
/*方法一*/
.center{
width: 500px
height: 300px
background: pink
/*实现div里的图片水平垂直居中*/
display: table-cell
text-align: center
vertical-align: middle
}
.center>img{
/*1,图片过大1024*1024，让图片和布局高度宽度等比例缩放*/
width: 300px
height: 180px
}
在css中改变background-image的大小可以通过将背景图片放置的一个div样式中，然后设置div的样式属性来实现。示例核心代码：
div{
background:url(图片路径)
background-size:800px 600px
background-repeat:no-repeat
}其中图片路径可以使用相对路径也可以使用绝对路径，不用添加双引号。最后一行的background-repeat:no-repeat意思可不允许背景图片在网页中平铺，只能使用一次。
扩展资料：
通过jquery中改变background-image的大小的实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
$('.box').CSS('backgroundSiz','300px 500px')
}
</script>
<style type="text/css">
.box{
background-image: url(1.png)
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
1、css控制图片大小，参考如下代码：div img {
max-width:600px
width:600px
width:expression(document.body.clientWidth>600?"600px":"auto")
overflow:hidden
}
2、代码说明：
◎ max-width:600px在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px在所有浏览器中图片的大小为600px
◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
◎ overflow:hidden超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
