css中图片居中的奇淫技巧

最新推荐文章于 2022-12-11 20:40:45 发布

会飞的虫儿飞

最新推荐文章于 2022-12-11 20:40:45 发布

阅读量132

点赞数

分类专栏：记录文章标签： css3

本文链接：https://blog.csdn.net/xxitcef/article/details/109780495

版权

记录专栏收录该内容

21 篇文章 2 订阅

订阅专栏

在做项目的时候要想使图片不变形，只需要只设置图片的高度或者只设置图片的宽度就可以解决。当图片的宽度大于容器的宽度时，要想让图片居中显示在容器内，可以使用的这样的奇淫技巧：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
        width: 300px;
        height: 300px;
        border:2px solid red;
        margin: 100px auto 0 ;
        text-align: center;
        overflow: hidden;
      }
      .box img{
        height: 100%;
        margin: 0 -100%
      }
		</style>
	</head>
	<body>
		<div class="box">
      <img src="./static/images/background.png"></img>
    </div>
	</body>
</html>