2 sinat 35836870 sinat_35836870 于 2017.01.16 18:20 提问

求解:背景图片问题,背景图片在浏览器百分比缩放下的显示问题 1C

如图,图2是源图大小,1920*679~
图1是切的跟显示屏大小之后缩放到50%的,
问:有没有一种方法能让图片在100%的时候显示如图1,但是图片在缩小之后把多余的背景显示出来,如图2……

ps:我之前是把背景图div用100%图片100%写的,但是这样height679之后logo就变形了,后来就把两边切了,但是又被要求缩小后两边最好也显示出来,并且显示屏100%的时候不能有横向滚动条……

请问,能否实现?有什么方法吗,多谢。图片图片

2个回答

qq_29594393
qq_29594393   Ds   Rxr 2017.01.16 18:49

css 的 media ,适应不同屏幕大小的处理方法
js 里面有一个onresize事件,也可以实现。
总归就是做个判断,屏幕大小 。然后设置图片样式

baidu_26611019
baidu_26611019   2017.01.17 11:11

样式参考
.bg {
background:url('/res/imgs/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
}
会根据你外部的div的大小来自动缩放显示,并且是全部显示

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
关于大背景图片随浏览器百分比缩放的问题
新手,此文为整理自己的疑惑。存在问题欢迎指正,多谢。 最近在写一个学校的引导页,背景图片1920*679。 以前写适应屏幕都是用100%写,所以这一次依然这样写了,但是这次却是一个有内容的背景图片,所以100%的方法导致logo等被压缩变形了。 后来又被要求,屏幕是100%的时候显示图片中间的内容部分,浏览器内容缩放后,整个背景显示出来,即两边隐藏的背景也显示出来,并且在屏幕
css背景图片在chrome下正常,IE下不显示
有一种情况:是通过直接修改后缀名引起的 例如: 1.jpg    --->> 1.png ,      2.bmp  --->> 2.jpg 这种情况下在IE下是不会正常显示的
IE下background背景图片无法显示问题解决方法
原代码如下:   原来的"label_input_checkbox_1_span的css设置如下: background: url("../images/news/201504280800.png")no-repeat 0% 0% transparent; background-repeat: no-repeat; cursor: pointer; vertical-
Button背景图片在IE下不显示问题
美工真是不容易当的啊,是很麻烦的东东。用CSS将button设置了背景图片,在FireFox下显示完全没有问题,但是在IE下却不能正常显示,本来就对IE没有好感,现在就更没有好感了,哎,不过没有办法啊,谁让用IE的用户多了呢,咱是网站开发者,得照顾用户吗。费话少说,解决问题的方法很简单,添加下面属性即可正常显示:        background-color: Transparent;以上代码
解决IE下图片作为背景时,有鼠标操作时的抖动问题
<br />昨天做用jquery的手风琴插件的时候,做出来的效果在IE下老是出现图片抖动,在网上搜集一下解决IE下图片作为背景时,有鼠标操作时的抖动问题<br /> 主要问题是在于IE6下默认不缓存背景图片,CSS里每次更改图片的位置时都会重新发起请求,解决的办法有以下几种:<br />(1)用CSS样式(不推荐)<br />      html {filter: e­xpression(document.execCommand("BackgroundImageCache", false, true));}
css背景图片填充样式background-size兼容ie8以下浏览器解决
background-image: url(images/background.jpg); background-size:100%;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg',sizingMethod='scale');/*兼容ie8以下*/ 已经试过,确实可用!!
ie下div撑不开或背景图片不显示的解决方法
其他浏览器没有问题 ie下会不显示背景图片或撑不开父div 解决方法 1:为其指定height具体数值 2:用hack指定100%,height:100%\9; 等找到更好的方法后再来更新
width:100%缩小窗口时背景图片出现空白bug
页面容器(#wrap)与页面头部(#header )为100%宽度。而内容的容器(#page)为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度: 改变浏览器窗口的大小,小于内容层宽度,如下图所示。 拖动水平滚动条,出现了bug的样子。右边的背景不存在了。如下图所示。 问题的根本在于:当窗口缩小时,
让背景图适应不同分辨率的设备和不同浏览器
单纯用图片铺满背景不重复方法1:body{ padding:0; margin:0; background:url(../images/vct.gif) 0 0 no-repeat scroll transparent; background-size:cover; } 缺点:适用于大图,背景图像的某些部分也许无法显示在背景定位区域中。 备注:****background-size更多了解请点击
ASP.NET中背景图片不能正常显示问题.
以下内容纯粹是个人总结的.不排除还有其它异常发生的可能性. 本人遇到的背景图片不能正常显示的问题有两种: 第一种是路径问题. 第二种是浏览器兼容问题. 第一种路径问题发生的原因,是不了解相对路径和绝对路径.通俗点像www.baidu.com,这样的是绝对路径.而相对路径是相对于站点上的目录而言的. 在这里需要注意的是,假如代码是background : url(bg.jpg),这