图片不压缩，图片随浏览器两端同时缩进

最新推荐文章于 2020-12-09 22:26:46 发布
原创 最新推荐文章于 2020-12-09 22:26:46 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#自适应布局 #图片随浏览器两端同时缩进

本文介绍了一种使图片在浏览器窗口中始终保持居中显示且随窗口缩放而调整位置的方法。通过设置图片父容器的位置属性及偏移量实现图片在不同分辨率下保持居中效果。

问题描述：图片随浏览器两端同时缩进



    <div class="img-container">
        <img src="../img/background_1.png" class="img-home" alt="home">
    </div>




.img-container{
    position: absolute;
    left: 50%;
    margin-left: -960px;
    overflow: hidden;
}





关键点：图片的父容器img-container 有固定宽度，left:容器宽度百分比一半 （50%）,margin-left:图片固定值一半（-1920/2 = -960px）；



效果：两张图片中地球大小是一样，截图有所出入


初始时


浏览器缩小后


                

        

    



  



    



                



	

		

			

				
					
图片宽高自适应，不压缩

				
			

			

				

					DreamFJ的博客
				

				

					04-26
					
					315
					
				

			

		

		

			
				
img{
    max-width: 188px;
    max-height: 106px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}




			
		

	



                

            
              



	

		

			

				
					
当缩小浏览器窗口时 背景图水平居中缩进

				
			

			

				

					weixin_30411239的博客
				

				

					02-10
					
					237
					
				

			

		

		

			
				
转载于:https://www.cnblogs.com/niaowo/p/4284177.html

			
		

	



              


  
              

                


	

		

			

				
					
img 显示固定部分，超过部分隐藏，不压缩，不变形

					
热门推荐

				
			

			

				

					weixin_42861240的博客
				

				

					03-19
					
					2万+
					
				

			

		

		

			
				
不知大家在做前端页面的时候，有没有遇到类似这样的问题：有一个不是正方形的图片，可能是宽度大于高度的，也可能是高度大于宽度的，而你又并不想用背景图的方式来做，要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图：只显示图片中间部分（红框部分）

下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果，首先我们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另...

			
		

	





	

		

			

				
					
CSS-图片显示固定大小不压缩、不变形

				
			

			

				

					weixin_43937466的博客
				

				

					04-19
					
					1万+
					
				

			

		

		

			
				
需求说明：
实现让长方形图片显示出正方形且不变形的效果的效果，一般可以有2种方式来实现，一种是设置为背景图，另一种是用img标签。
原图↓：

背景图↓：



一、背景图
首先，我们来看一下通过设置背景图的方式来实现我们的需求，主要通过background-size属性来设置我们的背景图缩放比例。

简单介绍一下background-size：
background-size: contain;...

			
		

	



		

			
		



	

		

			

				
					
Flex布局实现窗口缩进界面排版示例

				
			

			

				

					
				

			

		

		

			
				
5. **justify-content**：沿主轴方向对齐项目，取值包括flex-start（左/上对齐）、flex-end（右/下对齐）、center（居中对齐）、space-between（两端对齐，项目间间隔相等）、space-around（每个项目两侧的间隔相等...

			
		

	





	

		

			

				
					
将html转为text 并可以处理表格保留缩进

				
			

			

				

					09-09
				

			

		

		

			
				
 // 压缩连续空白，并去掉两端空白？注意：可能会丢失一些空格，但通常这样处理  }  // 元素节点  const tag = node.tagName.toLowerCase();  switch (tag) {  case 'table':  return convertTable(node, indent); /...

			
		

	





	

		

			

				
					
ASP.NET中实现段落缩进的VB代码示例

				
			

			

				

					
				

			

		

		

			
				
从给出的压缩包子文件名称“Example078-设置段落缩进”来看，这应该是一个具体的示例代码或者项目名称，它可能包含了上述提到的各种技术点，以及如何在ASP.NET环境中实现它们的详细说明。通过实践示例，开发者能够更...

			
		

	





	

		

			

				
					
Javascript实现的解压缩工具功能详解

				
			

			

				

					
				

			

		

		

			
				
例如，一个 Web 应用可能允许用户上传 RAR 压缩文件，然后使用 Javascript 调用后端服务（如 Node.js）来解压缩文件，并通过 Javascript 控制 DOM 来显示解压缩后文件的列表，同时支持格式化输出这些文件的内容，以...

			
		

	





	

		

			

				
					
网站CSS与JS代码压缩工具，提升访问速度

				
			

			

				

					
				

			

		

		

			
				
例如，一个原本包含大量缩进和注释的JavaScript文件，在压缩之后，可能只剩下一行紧凑的代码，变量名也可能被简化为a、b、c等单个字母。这样的处理方式虽然降低了代码的可读性，但对浏览器执行没有任何影响，反而...

			
		

	





	

		

			

				
					
CSS-10.背景颜色和背景图片

				
			

			

				

					别忘了缩进的博客
				

				

					01-29
					
					799
					
				

			

		

		

			
				
背景颜色：

使用background-color:red;

背景图片：

使用background-image: url("images/1.jpg");

背景图片的平铺方式：

使用background-repeat: repeat;

一般有四个取值repeat（完全平铺xy），repeat-x（x方向平铺），repeat-y（y方向平铺）

和no-repe

			
		

	





	

		

			

				
					
高固定宽自适应，图片不被压缩（轮播图图片不被压缩）缩略图插件

				
			

			

				

					会飞的咕咕鱼的博客
				

				

					06-18
					
					1461
					
				

			

		

		

			
				
1.使用插件实现 （ jqthumb.js下载（我想免费发资源，但是不行需要积分，大家可以自己下载或者怕麻烦可以邮箱给我 我私发））


   //引入jqthumb.js
   <a href="javascript:void(0)"><img src="..." alt="" onload="DrawImage(this)"></a>
   <scri...

			
		

	





	

		

			

				
					
文本缩进的使用-CSS入门基础（009）

				
			

			

				

					虾米大王的学习历程
				

				

					12-09
					
					968
					
				

			

		

		

			
				
今天我们接着分享关于文本样式的内容。



font-variant属性：



在CSS中，使用font-variant属性只有一个作用，就是把文本设置成小型的小写字母，此属性只针对英文而言。



语法：






font-variant:normal/small-caps;



font-variant属性
		属性值
			说明
		normal
			默认值，正常效果
		small-caps
			小型大写字母
		

示例代码：






<html>...

			
		

	





	

		

			

				
					
图片自适应不变形

				
			

			

				

					weixin_30328063的博客
				

				

					03-30
					
					484
					
				

			

		

		

			
				
<script type="text/javascript">            	function ResizeImage(_image, max_width, max_height) {            	    //var max_width = 300;            	    //var max_height = 300;            	    v...

			
		

	





	

		

			

				
					
PLECS损耗计算-基于LCC谐振变换器的DCDC双机并联电源开环热仿真

				
			

			

				

					01-06
				

			

		

		

			
				
PLECS损耗计算-基于LCC谐振变换器的DCDC双机并联电源开环热仿真内容概要：本文档主要围绕基于LCC谐振变换器的DCDC双机并联电源系统，利用PLECS软件开展开环热仿真与损耗计算的研究。通过建立系统的仿真模型，重点分析变换器在运行过程中的功率损耗分布及热特性，帮助优化电源设计中的散热管理与效率提升。文档还提及相关电力电子系统建模、热仿真方法的应用背景，强调了在高功率密度电源设计中损耗精确计算的重要性。;  
适合人群：具备电力电子、电源系统设计或仿真基础，从事相关领域研究的研发人员、工程技术人员及高校研究生。;  
使用场景及目标：①掌握LCC谐振变换器的工作原理及其在双机并联结构中的应用；②学习使用PLECS进行电源系统的损耗建模与热仿真分析；③优化DCDC电源的热设计与效率性能。;  
阅读建议：建议读者结合PLECS仿真工具实际操作，深入理解文档中的模型搭建、参数设置与仿真流程，并关注损耗计算与热分析的关键步骤，以实现对电源系统性能的全面评估与优化。

			
		

	





	

		

			

				
					
Web开发：一图简述OAuth 2.0授权流程中的一些关键步骤

					
最新发布

				
			

			

				

					01-06
				

			

		

		

			
				
Web开发：一图简述OAuth 2.0授权流程中的一些关键步骤

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值