图片比例自适应居中与CSS垂直水平居中

最新推荐文章于 2024-06-13 19:04:45 发布
最新推荐文章于 2024-06-13 19:04:45 发布
阅读量8.9k 收藏 4
点赞数
分类专栏： web前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MayMayJn/article/details/80015982
版权
本文介绍了如何使用CSS实现图片在固定高度下按比例自适应居中，以及元素的垂直水平居中。针对图片，通过设置内外部容器样式，实现了在不同宽度下图片始终保持比例并居中显示；对于CSS垂直水平居中，利用绝对定位和transform属性，实现了内容在容器中的精准居中展示。
摘要由CSDN通过智能技术生成

图片比例自适应居中

说明

最近项目里有这样一个需求：要求是在图片外部的框框是大小一致、图片的长宽比不一致，且图片能够在固定高度的情况下，使得图片的宽度能保持原有的比例，及宽度不压缩，图片始终在外部div的最中间，如下图所示

  • 图片宽度大于外部边框的情况下，两边会有一部分看不见

原图

9

效果图

1

  • 图片宽度小于外部边框的情况下，两边会留白

原图

10

效果图

2

代码

在网上找了许多资料，最终使用了下面的方案，效果很OK

html部分

<div class="img">
    <img src="xxx.jpg">
</div>

css部分


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  MayMayJn
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS简单的图片居中

				
			

			

				

					m0_67401761的博客
				

				

					08-01
					
					1万+
					
				

			

		

		

			
				
就可以实现水平居中了!实现图片的水平居中；(有的设计师为图片再加个div标签，然后通过div标签的margin实现居中，也可以，不过，在结构中就又多了对div，相对麻烦点)至于垂直居中的方法和前面的都一样，就不再重述。padding-top50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下(DIV的高度–图片的高度)/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。...

			
		

	



                

              
                



	

		

			

				
					
css 水平居中，垂直居中，自适应宽度的代码

				
			

			

				

					09-25
				

			

		

		

			
				
### CSS水平居中与垂直居中及自适应宽度详解  #### 一、宽度自适应的元素水平居中  在Web开发中，使元素能够根据内容的多少自动调整宽度，并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果...

			
		

	



                


  
              

                


	

		

			

				
					
html css 图片居中

				
			

			

				

					weixin_33951761的博客
				

				

					09-12
					
					74
					
				

			

		

		

			
				
与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，...

			
		

	





	

		

			

				
					
css 图片自适应屏幕大小

					
最新发布

				
			

			

				

					qq_33240556的博客
				

				

					06-13
					
					1404
					
				

			

		

		

			
				
通过使用max-widthobject-fit以及 Flexbox 等方法，你可以轻松实现图片自适应屏幕大小。这些方法可以单独使用，也可以结合使用，以满足不同的设计需求。

			
		

	



		

			
		



	

		

			

				
					
css如何让图片居中

				
			

			

				

					百变鹏仔工作室
				

				

					02-04
					
					1170
					
				

			

		

		

			
				
使用position和transform属性：将图片的父容器设置position: relative，将图片设置为position: absolute，然后使用transform属性进行居中偏移。使用表格布局：将图片的父容器设置为display: table，将图片设置为display: table-cell，并添加vertical-align: middle属性。以上是几种常用的方法，根据具体场景选择适合的方法即可。鹏仔前端pjxi.com。

			
		

	





	

		

			

				
					
css图片居中_关于水平居中

				
			

			

				

					weixin_39700394的博客
				

				

					11-29
					
					99
					
				

			

		

		

			
				
今天初十，在家闲着没事干，干脆写篇文章解解闷好了我们有时候会遇到需要设置水平居中的场景，那么今天来谈讨论下如何进行水平居中。首先我们要分情况讨论：它是行内元素呢还是块状元素，块状元素里面又分为定宽块状元素和不定宽块状元素。我们先来看行内元素的水平居中。当被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。我们看这段代码：<效果图：我们...

			
		

	





	

		

			

				
					
CSS解决未知高度的垂直水平居中自适应问题

				
			

			

				

					09-27
				

			

		

		

			
				
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0

			
		

	





	

		

			

				
					
layer弹出层自适应高度,垂直水平居中的实现

				
			

			

				

					10-16
				

			

		

		

			
				
`layer` 是一个常用的 JavaScript 弹窗插件，它提供了丰富的功能，包括弹出层的自适应高度和垂直水平居中。本文将详细讲解如何利用 `layer` 实现这些效果。  首先，我们来关注高度自适应的问题。在 `layer` 中，当弹...

			
		

	





	

		

			

				
					
未知大小的图片自适应水平垂直居中源码纯CSS

				
			

			

				

					04-30
				

			

		

		

			
				
未知大小的图片 垂直居中，水平居中，纯CSS。兼容主流浏览器。

			
		

	





	

		

			

				
					
使用bootstrap的H5页面登录框自适应水平居中、垂直居中

				
			

			

				

					07-18
				

			

		

		

			
				
总的来说，实现Bootstrap的H5页面登录框自适应水平居中和垂直居中，需要对Bootstrap的栅格系统、CSS布局技术（如Flexbox或Grid）以及可能的JavaScript/jQuery处理有一定理解。通过灵活运用这些技术，你可以创建出...

			
		

	





	

		

			

				
					
分别利用css和js来使div中的图片居中

				
			

			

				

					03-05
				

			

		

		

			
				

博文链接：https://bazhuang.iteye.com/blog/156001

			
		

	





	

		

			

				
					
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

				
			

			

				

					04-29
				

			

		

		

			
				
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

			
		

	





	

		

			

				
					
css实现元素水平垂直居中常见的两种方式实例详解

				
			

			

				

					09-24
				

			

		

		

			
				
在CSS布局设计中，使元素水平垂直居中是一项常见的需求。本文将详细解析两种主流的实现方法，并通过实例代码进行演示。  首先，我们来看第一种方法：使用`flexbox`(弹性盒模型)布局。Flexbox是CSS3引入的一种布局...

			
		

	





	

		

			

				
					
CSS制作水平垂直居中对齐 多种方式各有千秋

				
			

			

				

					09-25
				

			

		

		

			
				
在网页设计中，CSS布局是不可或缺的一部分，而水平垂直居中对齐则是一个常见的需求，尤其是在构建响应式和自适应的界面时。本篇文章将探讨几种实现CSS水平垂直居中的方法，每种方法都有其独特的优势和局限性。  首先...

			
		

	





	

		

			

				
					
css自适应宽度 多种方法实现宽度自适应的水平居中

				
			

			

				

					09-25
				

			

		

		

			
				
宽度自适应达到水平居中在网页制作中很常见而且很实用，本文整理搜集了一些实用的自适应宽度的水平居中技巧，感兴趣前端工程师们可以借鉴一下，或许对你有所帮助

			
		

	





	

		

			

				
					
css图片居中

				
			

			

				

					m0_45218136的博客
				

				

					09-18
					
					7264
					
				

			

		

		

			
				
css图片水平垂直居中

			
		

	





	

		

			

				
					
css 图片居中

				
			

			

				

					谁还不是一块小饼干的博客
				

				

					06-14
					
					332
					
				

			

		

		

			
				
html


<div class="image"><img src="images/car_01.png"></div>

css


.image{text-align: center;display: table-cell;vertical-align: middle;}
.image img{width: 85%;}




			
		

	





	

		

			

				
					
css图片居中(水平居中和垂直居中)

				
			

			

				

					yangmy_Shy的博客
				

				

					09-04
					
					2020
					
				

			

		

		

			
				
css图片居中(水平居中和垂直居中)css图片水平居中1.利用margin: 0 auto实现图片水平居中
例如：
&lt;div style="text-align: center; width: 500px; border: green solid 1px;"&gt;
    &lt;img alt="" src="https://www.baidu.com/img/baidu_jgylogo...

			
		

	





	

		

			

				
					
css文本自适应水平垂直居中

				
			

			

				

					06-10
				

			

		

		

			
				
要实现文本的自适应水平垂直居中，可以使用CSS的flex布局和伪元素。具体步骤如下：  1. 将要居中的文本包裹在一个div容器中，并将该容器设置为display:flex;以启用flex布局。  2. 设置该容器的justify-content和...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值