banner随浏览器窗口缩放变形问题的解决方案

最新推荐文章于 2024-04-11 14:40:34 发布
原创 最新推荐文章于 2024-04-11 14:40:34 发布 · 2.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#缩放窗口 #onsize

本文介绍了一种利用背景图片而非单纯图片标签的方法来处理网页中的banner图，在浏览器窗口大小变化时保持图片的良好显示效果。通过监听窗口大小的变化并调整图片的位置，确保了在不同分辨率下都能获得较好的视觉体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一般banner不只是图片，还包含一些好看的文字，在浏览器缩放的过程，容易变形；一般情况下我们使用的img标签存放图片，当然也可以采用背景图片的方式。

这里的例子时采用背景图片的方式，

 

 改变窗口大小的事件中，设置图片的左右间距，即可（我固定窗口最小宽度为1200px）：


                

        

    

    
  



    



                



	

		

			

				
					
背景图页面缩小会变形_HTML中怎么让背景图片跟着浏览器窗口变大变小？

				
			

			

				

					weixin_39634900的博客
				

				

					12-20
					
					5436
					
				

			

		

		

			
				
HTML中怎么让背景图片跟着浏览器窗口变大变小？以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！HTML中怎么让背景图片跟着浏览器窗口变大变小？你可以先用表格，按%显示表格，表格里再背景就OK了， ASP如何设置背景图片平铺浏览器窗口首先要看你的背景图片是不是够大 如果不够大，要设置背景平铺，就会有 背景重复和不重复的问...

			
		

	



                

            
              



	

		

			

				
					
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js

				
			

			

				

					10-21
				

			

		

		

			
				
图片变形会严重影响用户的视觉体验，因此寻找一种有效的解决方案是非常必要的。  在本节中，我们将介绍一个名为jqthumb.js的jQuery插件，它可以解决Bootstrap轮播插件中图片变形的问题。jqthumb.js是一个图片缩放的...

			
		

	



              


  
              

                


	

		

			

				
					
解决banner图在浏览器缩放的情况下实现不变形

				
			

			

				

					qq_40673860的博客
				

				

					05-27
					
					2628
					
				

			

		

		

			
				
html代码：
<div class='bannerbox'>
  <div class='banner'>
      <img src="../assets/01.jpeg">
   </div>
</div>
<style>
    .bannerbox { 
        width:100%; 
        p...

			
		

	





	

		

			

				
					
【转】超宽的banner条自适应浏览器大小始终居中的方法

				
			

			

				

					weixin_33939843的博客
				

				

					09-05
					
					501
					
				

			

		

		

			
				
现在越来越多的人使用宽屏的显示器了，所以传统的1024或者960的宽度banner条也逐渐的不被客户端访客所喜欢，所以现在在网站前端开发中一定要考虑到这一点，但是我们会发现在宽屏浏览器下设计出来的banner在传统的1024的显示器下浏览是会出现横向滚动横条。只要在对应标签插入如下CSS即可解决。
position: absolute;
top: 0;...

			
		

	



		

			
		



	

		

			

				
					
缩放屏幕的时候banner被压缩变形！

				
			

			

				

					anji7380的博客
				

				

					12-26
					
					394
					
				

			

		

		

			
				
大家在做项目的时候有没有遇到一个问题呢  就是一张图片宽度100%  在缩放屏幕的时候图片会被压缩变形！！！那么怎么才能实现图片始终居中而不被压缩变形呢？ 接下来让我带领大家解决这个问题 请看代码↓↓↓↓↓↓↓

<div class='bannerbox'>
  <div class='banner'>
      <img src=...

			
		

	





	

		

			

				
					
背景图片，banner图片随屏幕大小变化而变化

				
			

			

				

					qq_40893035的博客
				

				

					12-28
					
					1166
					
				

			

		

		

			
				
背景图片变化
业务背景：一个固定高度，固定最小宽度的横幅式banner
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document&lt

			
		

	





	

		

			

				
					
更改分辨率时banner图片变形解决方案

				
			

			

				

					qq_43693588的博客
				

				

					12-04
					
					1069
					
				

			

		

		

			
				
1.父级宽度100%随分辨率自适应并设置超出隐藏
.banner{
	width:100%;
	position:relative;
	overflow:hidden
}

2.子级图片宽高固定并定位居中
.banner img{
	width:1920px;
	height:240px;
	position:absolute;
	left:50%;
	margin-left:-960px;
}
...

			
		

	





	

		

			

				
					
cookie-banner:欧盟Cookie政策的jQuery解决方案

				
			

			

				

					05-20
				

			

		

		

			
				
该脚本基于Creare的“暗示同意” EU Cookie Law Banner v：2.4，但已进行了大量更改和重构，以提供更多选项和使用jQuery。 正在安装 只需包含cookie-banner.js文件即可。 或者，如果您使用凉亭，则可以运行：  	...

			
		

	





	

		

			

				
					
Banner易用超声波传感器的灵活解决方案

				
			

			

				

					10-26
				

			

		

		

			
				
超声波传感器已经成了一个常规设备在过程控制中提高产品的质量，应用在检测次品，确认出现或者消失和其他一些领域。这项曾经十分昂贵而且精准度不高的技术如今已经变得简单易用，精度高且费用低廉，在工业上的应用中...

			
		

	





	

		

			

				
					
猎豹浏览器宽屏banner焦点图代码

				
			

			

				

					04-07
				

			

		

		

			
				
【猎豹浏览器宽屏banner焦点图代码】是一种用于网页设计的技术，主要应用于网站头部的吸引眼球的视觉元素，即我们常说的Banner。这种焦点图通常包含一系列图片或内容，通过动态切换来展示不同的信息，以提升用户体验...

			
		

	





	

		

			

				
					
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图

				
			

			

				

					10-24
				

			

		

		

			
				
在本文中，我们将探讨如何使用jQuery和CSS3技术来创建一个仿猎豹浏览器宽屏的Banner焦点图特效。这个特效不仅具有吸引人的视觉效果，而且兼容各种主流浏览器，包括对手机触屏滑动的支持。  首先，HTML结构是构建焦点...

			
		

	





	

		

			

				
					
Spring banner变换

				
			

			

				

					achen0001的专栏
				

				

					12-30
					
					606
					
				

			

		

		

			
				
https://blog.youkuaiyun.com/u012373815/article/details/54948673

			
		

	





	

		

			

				
					
banner 区域使用定位后浏览器缩小依然会改变其位置的解决方法

				
			

			

				

					weixin_43755513的博客
				

				

					07-31
					
					837
					
				

			

		

		

			
				
banner区域写了定位，但是浏览器缩小依然会跑到其他位置（应该始终都是居中的）
解决方法：给banner设置width：100%；
<!--banner-->
		<div class="banner">
			<div class="pic">
				<img src="img/banner.jpg" alt="" />
			</di...

			
		

	





	

		

			

				
					
SpringBoot启动时banner设置

					
最新发布

				
			

			

				

					计算机小白的奋起
				

				

					04-11
					
					826
					
				

			

		

		

			
				
springboot的banner图，弄着玩

			
		

	





	

		

			

				
					
如何在显示图片缩略图时不挤压拉伸图片

				
			

			

				

					RainSorrow的博客
				

				

					03-07
					
					1万+
					
				

			

		

		

			
				
前言：我们在前端显示图片缩略图的时候，会遇到不清楚图片的尺寸，然后使用固定高宽比的img来显示图片，这样会导致高宽比不一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。



方案一 max-width和max-height

使用max-width和max-height来做，这种情况下不能保证每一张图片预览都是相同宽高的，但是却不会挤压拉伸图片。

如下图，二、三张图片的宽...

			
		

	





	

		

			

				
					
banner图失真解决方案

				
			

			

				

					supertor的博客
				

				

					08-10
					
					2608
					
				

			

		

		

			
				
PS吐槽 由于项目中遇到PC端和手机端共用一张轮播图这种问题，当时脑子第一反应，尼玛哪有这么搞的，手机与PC能用一张图吗？？？这么搞图片肯定失真呀。这种情况别折腾了，没必要，直接抛给美工切图，后端自己偷懒，自己解决吧。碍于面子，勉强改改，不过还是有办法的。
首先最简单的确认PC与手机端的图片横纵比，尽量一致，直接修改PC的CSS样式（PC端能有所牺牲，公司主要需求在手机端）。 
如果不怕麻烦可以采取

			
		

	





	

		

			

				
					
HTML怎么跟随页面缩放,如何让网页跟着 浏览器全比例缩小(示例代码)

					
热门推荐

				
			

			

				

					weixin_29301059的博客
				

				

					06-03
					
					3万+
					
				

			

		

		

			
				
需求今天帮朋友做个小网页,但一直没明白对方的需求;原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例"未满足需求时满足需求之前,登陆框的 margin-top 以及 margin-left 的值用的都是精确px(像素值);整体页面css(审查元素)把浏览器窗口缩小会发现"登陆框"会因为"margin-left:1000px"的原因留在它固有的位置,从而看不到它,自然也...

			
		

	





	

		

			

				
					
html页面banner空白,css banner不拉伸

				
			

			

				

					weixin_39557419的博客
				

				

					06-03
					
					238
					
				

			

		

		

			
				
css banner不拉伸现在很多网站的Banner图片都是全屏宽度的，这样的网站看起来显得很大气。这种Banner一般都是做一张很大的图片，然后在不同分辨率下都是显示图片的中间部分。实现方法如下：1、首先设置banner的父元素定位为相对定位，宽度为100%；2、然后设置banner元素宽度为图片宽度，定位为绝对定位；3、最后再设置它距离左侧50%，margin-left为图片一半即可。Titl...

			
		

	





	

		

			

				
					
GXBanner: 高效的滚动广告Banner自动播放解决方案

				
			

			

				

					
				

			

		

		

			
				
考虑到GXBanner的可能用途，它也有可能是一个跨平台的解决方案，比如使用React Native、Flutter等框架实现的组件，这些框架允许开发者使用同一套代码库来构建iOS和Android应用。  在压缩包子文件的文件名称列表中，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值