html中怎么让一个图片（img）在大于父容器（div）的情况下仍中间部份居中
4个回答
展开全部
如果已知父容器和img的宽和高，可以这么解决：
<style type="text/css">
*{margin:0;padding:0;border:none;}
.div1{width:300px;height:300px;margin:100px auto;border:1px solid #00F;position:relative;}
/*如果想图片超出的部分隐藏，就在div1中加overflow:hidden;*/
.div1 img{width:500px;height:300px;position:relative;top:50%;left:50%;margin-left:-250px;margin-top:-150px;}
/*思路是使div和img的中心点重合，中心点重合后img就在div中垂直水平居中了。margin-left和margin-top的值分别是图片本身宽度的一半、高度的一半*/
</style>
<div class="div1">
<img src="http://news.baidu.com/z/resource/r/image/2013-11-22/8f375dc15dcd832f16ec4e182aac50ed.jpg" width="560" height="300" />
</div>
如果未知容器的宽高、未知图片的宽高，可以使用js来读取后计算。思想也是使两者的中心点重合。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
html中让一个图片（img）在大于父容器（div）的情况下仍中间部份居中，这个的话，是可以通过css来调整的，父类的div小于img的宽度，那我就调整包裹img的那个div的宽高就可以了，我这里提交代码：
<html>
<head>
<title>测试类</title>
<style>
#div1{
width:400px;
height:400px;
}
#div2{
width:200px;
height:200px;
margin:0 auto;
}
</style>
</head>
<body>
<div id='div1'>
<div id='div2'>
<img src='图片地址'>
</div>
</div>
</body>
</html>
<html>
<head>
<title>测试类</title>
<style>
#div1{
width:400px;
height:400px;
}
#div2{
width:200px;
height:200px;
margin:0 auto;
}
</style>
</head>
<body>
<div id='div1'>
<div id='div2'>
<img src='图片地址'>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
都没分!
你可以把图片设为背景图 background:url(image-url.gif) no-repeat center center;
你可以把图片设为背景图 background:url(image-url.gif) no-repeat center center;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
