图像居中

最新推荐文章于 2024-06-17 11:26:16 发布

dream_hai

最新推荐文章于 2024-06-17 11:26:16 发布

阅读量852

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/dream_hai/article/details/62883494

版权

14 篇文章 0 订阅

订阅专栏

 
 <style> 

  .back{ 

  width:500px; 

  height:500px; 

  border:2px blue solid; 

  text-align:center; //水平居中 

}

  .back img{ 

  width:300px; 

  height:300px; 

  //margin-top:100px; 

  //padding-top:calc(50% - 150px); //垂直居中，直接写数值,。padding,margin均可，也可以使用relative、absolute，来定位。 

}

  </style> 

  <body> 

  <div class="back"> 

  <img src="timg.jpg"> 

  </div> 

  </body> 

  <style> 

  .back{ 

  width:600px; 

  height:600px; 

  border:2px blue solid; 

  background:url('timg.jpg') no-repeat 0 center; 

  background-size:contain; /*contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/ 

}

  </style> 

  <body> 

  <div class="back"></div> 

  </body> 

 
 可能的值 

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

关注

专栏目录