图片过大，在div中不压缩的居中方法

最新推荐文章于 2023-03-09 20:05:03 发布

weixin_38168918

最新推荐文章于 2023-03-09 20:05:03 发布

阅读量399

点赞数

原文链接：http://www.cnblogs.com/xiangming25/p/5725395.html

版权

在图片全屏轮播时，为了兼容更大的屏幕，我们常常把图片设置为很大，但是在显示的过程中，如果让图片随浏览器自动变化的话，常常会把图片压缩变形，影响显示，在不压缩图片的情况下，如何只显示图片的中间部分呢？

目前提供两种解决方案：

方案一：

引入css

.parent {
    position: relative; overflow: hidden;
 　　width:400px;
　 　height:300px; } .child { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; }


相应的html代码为：

<!DOCTYPE html>
<html lang="en">
　　<head>
　　<meta charset="UTF-8">
　　<title>Document</title>
　　<style type="text/css">
　　　　.parent {
　　　　　　position: relative;
　　　　　　overflow: hidden;
　　　　　　height: 300px;
　　　　　　width: 400px;
　　　　}

　　　　.child {
　　　　　　position: absolute;
　　　　　　top: -9999px;
　　　　　　bottom: -9999px;
　　　　　　left: -9999px;
　　　　　　right: -9999px;
　　　　　　margin: auto;
　　　　}
　　</style>
</head>
<body>
<div class="parent">
　　<img class="child" src="http://c11.eoemarket.com/upload/apps/2013/0420/131329/screenshots/21bf3021-aeef-4dbf-fd5c-6dd7c24cb1f3.jpg">
</div>
</body>
</html>



方案二：

<!DOCTYPE html>

<head>

<title>Document</title>

body{

text-align: center;

}

.container{

width: 100%;

height: 400px;

margin: 0 auto;

overflow: hidden;

}

.container img{

margin: 0 -100% 0 -100%;

vertical-align: top;

}

</style>

</head>

<body>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/xiangming25/p/5725395.html

weixin_38168918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片过大，在div中不压缩的居中方法

在图片全屏轮播时，为了兼容更大的屏幕，我们常常把图片设置为很大，但是在显示的过程中，如果让图片随浏览器自动变化的话，常常会把图片压缩变形，影响显示，在不压缩图片的情况下，如何只显示图片的中间部分呢？目前提供两种解决方案：方案一：引入css.parent { position: relative; overflow: hidden; 　　width:40...
复制链接

扫一扫