CSS怎样显示图片中间区域？
比如：现在有一张500x300的图片，我现在要把它放在一个100x100的容器里面，而且不可以改动图片的大小，只显示图片中间的部分在固定的窗口里，请问应该如何实现，...
比如：现在有一张500x300的图片，我现在要把它放在一个100x100的容器里面，而且不可以改动图片的大小，只显示图片中间的部分在固定的窗口里，请问应该如何实现，
展开
9个回答
展开全部
可以使用以下几种方式：
1、相对定位方式，设置图片的position属性为relative，然后设置left top属性为负数，做到显示中间区域，外层标签要设置overflow属性为hidden不然会撑大。
2、把图片当做背景使用，然后设置背景居中或者手工填写位置。
3、使用图片margin属性，外层标签要设置overflow属性为hidden不然会撑大。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>图片</title>
<style>
.div1{
width:300px;
height:400px;
border:1px solid #4EC83B;
overflow: hidden;
}
.div1 img {
position: relative;
left: -100px;
top: -150px;
}
</style>
</head>
<body>
<div style="float:left;margin:10px;">
第一种
<div class="div1">
<img src="img1.jpg" width="500" height="700" alt="" />
</div>
</div>
<div style="float:left;margin:10px;">
第二种
<div style="width:300px;height:400px;background-image:url(img1.jpg);background-repeat: no-repeat;background-position:center center;border:1px solid #4EC83B;">
</div>
</div>
<div style="float:left;margin:10px;">
第三种
<div style="width:300px;height:400px;border:1px solid #4EC83B; overflow: hidden;">
<img src="img1.jpg" width="500" height="700" style="margin:-150px -100px;" />
</div>
</div>
</body>
</html>
效果如下：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
办法一：
<div style="width:100px;height:100px;>
<img src="1.jpg" width="500" height="300" alt="" style="margin-top:-150px;margin-left:-250px;" />
</div>
办法二：
<div style="width:100px;height:100px;background:url(1.jpg) no-repeat center center">
</div>
办法三：
<div class="div1">
<img src="1.jpg" width="500" height="300" alt="" />
</div>
<style>
.div1{width:100px;height:100px;position:relative;}
.div1 img{widht:500px;height:300px;position:absolute;left:-250px;top:-150px;}
</style>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把图片作为容器的背景，调整背景图片的位置就行了。试试下面的代码：
图片位置.html 文件代码清单如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>图片位置</title>
<link rel="stylesheet" href="picpos.css" />
</head>
<body>
<div class="insertpic">
</div>
</body>
</html>
picpos.css 文件代码清单如下：
.insertpic {
width: 100px;
height: 100px;
border: 1px solid #ccc;
background: #ccc url(1.png) center center no-repeat; /* 两个center使图片居中 */
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
两个办法
1，用margin属性，这里用到负数值
2，用定位position属性。
1，用margin属性，这里用到负数值
2，用定位position属性。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
要显示图片的中间区域，可以把这张图片当做背景图片来用，用法如下：
background:url(图片地址) no-repeat center center;
background-size:cover;
background:url(图片地址) no-repeat center center;
background-size:cover;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（7）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
