Div 存在溢出的情况下:图片居中 的方法
发布网友
发布时间：2022-04-06 11:50
共4个回答
热心网友
时间：2022-04-06 13:19
使用定位可以实现的！
思路：图片在div里是从左上角开始显示，所以右下角超出的部分会被隐藏，用这个特点，所以再套个div，并对这个div对进定位操作，再对img进行定位，就可以得到我们想要显示的部分了。
我写了一段代码供参考一下！
css部分：(假定div设定为200*100px;)
.aa{ width:200px; height:100px; margin:0 auto; margin-top:100px; background:#9F0; overflow:hidden;}.aa_1{width:200px; height:100px; position:relative; top:-50%; left:50%;}
.aa_1 img{position:relative; top:0px; left:-250px;}
html部分：（这里的图片尺寸为500*200px）
<div class="aa"><div class="aa_1">
<img src="xoo.png" width="500" heigh="200" />
</div>
</div>
追问
其实你这个代码可以实现 虽然我没放DW测试。 关键其实是img 里面的left：-250px吧，刚刚好是原图的50% ；aa_1里面对top也做了-50%的处理 而且图片的height=div的高。不过我要实现的是这个效果，在不同尺寸显示器里面都能实现俺去设计区居中。所以我的DVI的width肯定需要设置：100%。其实我就奇怪现在每个网站都兼容不同的尺寸屏幕，为什么我找不到设置的方法？
你的意思是不管什么尺寸的显示器，都能居中且图片铺满显示器？
兼容的显示器尺寸为：1024px-2560px，只要在这个范围，图片都能居中且铺满显示器，但是超出这个范围的显示器无法保证了。
<div style="width:1920px; height:400px; position:relative; top:auto; left:50%;">
<img style=" width:2560px; height:400px; position:relative; left:-1280px; top:auto;" src="2560.png" />
</div>
</div>
热心网友
时间：2022-04-06 14:37
<head>
<style>
div{ width:300px; height:200px; background:url(12a.jpg) no-repeat; background-position:-300px -300px;}
</style>
</head>
<body>
<div>
<h2>以上是采用以图片作为背景，进行图片定位位置可以随心所欲，如果想要图像达到这种效果，请使用CLIP属性配合JS裁剪！</h2>
</div>
</body>
</html>
热心网友
时间：2022-04-06 16:12
不知道你明白不明白我的意思。
还有一种方法就是那个说的，直接用PS处理好图片。
热心网友
时间：2022-04-06 18:03
var aIsIE={};
window.onload=function(){
if(isIE){
window.onscroll=doIE;
window.onresize=doIE;
}
}
function doIE(){
aIsIE.top=document.documentElement.scrollTop;
aIsIE.left=document.documentElement.scrollLeft;
var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
var oDiv=document.getElementById("img");
oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';
oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';
}
思路是嵌套一个div在图片外面 做浮动定位 ，希望能帮到你
