图片垂直水平居中和自动等比拉伸大方法

最新推荐文章于 2022-10-31 11:41:13 发布

雾雨mo理沙

最新推荐文章于 2022-10-31 11:41:13 发布

阅读量246

点赞数

文章标签： css html less vue

本文链接：https://blog.csdn.net/qq_35822854/article/details/117794004

版权

图片垂直水平居中,并自动等比拉伸
写项目时经常需要图像垂直水平居中,如图所示
在这里插入图片描述

先建立两个div再写入img

div区域

  <!--main左侧-->
  <div class="mainLeft">
    <!--放图区域-->
    <div class="top pic">
      <img src="../../assets/husky_0.jpeg"   />
    </div>
  </div>

style区域
在这里插入代码片

<style>
	  .mainLeft {
    	width: 1065/1920 * 100vw;
    	height: 845/1920 * 100vw;
 		overflow:auto;
    	margin: 50px; /* 外间距50px */
        padding: 100px; /* 内间距100px,和下基本cp锁死了 */
        box-sizing: border-box; /* 防止padding撑大盒子 */
        background-color: aqua;
        display: table;

    	 .top {
    	   width: 1065px;
           background-color: aqua;
           vertical-align: middle;
           text-align: center;
           display: table-cell;
           vertical-align: middle;
    	   	img {
    	     width: auto;
       		 height: auto;
       		 line-height: 100%;     
       		 // min-width: 100%;
      		 // min-height: 100%;
             text-align: center;
     		}
     	}
     }
</style>