PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

网页图片通栏实现的思路,谁能指导一下?_html/css_WEB-ITnose

原创
2016-06-24 11:39:24 1647浏览

经常看到网站上有很多通栏的效果,比如轮播的banner这种,但是偶尔遇到单个图片宽度为1920px的时候,如何实现图片在网页居中,通栏呢??网页宽度假设960px,图片宽度1920px。
麻烦讲下思路,或者写个代码例子。谢谢。

如图:


回复讨论(解决方案)

不限制body的宽度,然后在每个模块设置相应的宽度即可。、

另外,不推荐使用分辨率非常高,或者文件特别大的文件,会导致加载速度慢等问题。

不限制body的宽度,然后在每个模块设置相应的宽度即可。、

另外,不推荐使用分辨率非常高,或者文件特别大的文件,会导致加载速度慢等问题。


这种状况基本很少把,一般都是一开始把网站框架搭好,临时遇到什么修改的就这种情况,也不可预料。代码怎么实现图上的效果呢,可以详细讲一下吗?


不限制body的宽度,然后在每个模块设置相应的宽度即可。、

另外,不推荐使用分辨率非常高,或者文件特别大的文件,会导致加载速度慢等问题。


这种状况基本很少把,一般都是一开始把网站框架搭好,临时遇到什么修改的就这种情况,也不可预料。代码怎么实现图上的效果呢,可以详细讲一下吗?

轮播的图片一般都是宽高一致的,对于你说的那种效果,可以参考一下dnspod.cn,那个轮播,中间的图片是固定的,其余都是背景色。

代码里面实现的效果:
示例效果就懒得优化了,大概意思是这个。
			img		
fdsaflkdsa11202112101lfdskaljfdsalkfjdsalkfdjsaklfdsadfsaas
fdsaflkdsalfdskaljfdsalkfjdsalkfdjsaklfdsadfsaas

客户端的设备分辩率都不同的,第一首先定义标准 网格960,你其它的部分在这个warp中写入,至于1920的那个让居中显示,撑满整屏(1920的图设计也得有思路,按普扁性的分辩率来设计,把需要表达的图片内容最好在中间大小约为1200部分设计),若遇小于1920分辩的中间该表达的东西都在,其它部分隐藏了,若遇大于1920的,两边用颜色填充,即便是分辩率达到4000,你的要求也会达到,因为有颜色填充。

aaaaa
960>

1920>

bbbb
960>

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。