html css 如何使图片居中且不变形

图片的居中如果掌握不好技巧会导致很多问题，例如图片的父容器改变位置或者改变定位方式导致居中失效等，写死长度的居中或者不能改变定位的居中都是很容易出问题的代码。
下面这种方式可以让你的图片居中不受父容器和外界影响，也不受图片本身大小和比例影响。

操作方法

  • 01

    打开在线写前端代码的网站如jsrun或者jsfiddle

  • 02

    目标是做一个如图所示的效果，不同大小的图片

  • 03

    每个方框的html 如下， <div> <span> <img src='图片地址'> </img> </span> </div>

  • 04

    css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。 其中 display: table-cell; text-align: center; vertical-align: middle; 这3行决定居中效果。 其中 img { max-width: 100%; max-height: 100%; } 的目的是让图片可以缩放而比例不变。 div { float:left; margin:5px; padding:5px; border:1px solid #000; } span { font-size: 0; width: 150px; height: 150px; display: table-cell; text-align: center; vertical-align: middle; } img { max-width: 100%; max-height: 100%; }

  • 05

    效果如下，很好的实现居中

  • 06

    上面是div为float的情况 div如果是absolute或fixed也可以正常表现。 只有一个div的情况下，代码如下 <div> <span> <img src='图片地址'> </img> </span> </div> div { margin:5px; padding:5px; border:1px solid #000; position: absolute; left:100px; top:100px; } span { font-size: 0; width: 150px; height: 150px; display: table-cell; text-align: center; vertical-align: middle; } img { max-width: 100%; max-height: 100%; }

  • 07

    这张图片仍然是居中的，没有收到父容器的影响。

赞 (0)

相关推荐