网页图片通栏实现的思路，谁能指导一下？_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:39:241882검색
经常看到网站上有很多通栏的效果，比如轮播的banner这种，但是偶尔遇到单个图片宽度为1920px的时候，如何实现图片在网页居中，通栏呢？？网页宽度假设960px，图片宽度1920px。
麻烦讲下思路，或者写个代码例子。谢谢。
如图：
回复讨论(解决方案)
不限制body的宽度，然后在每个模块设置相应的宽度即可。、
另外，不推荐使用分辨率非常高，或者文件特别大的文件，会导致加载速度慢等问题。
不限制body的宽度，然后在每个模块设置相应的宽度即可。、
另外，不推荐使用分辨率非常高，或者文件特别大的文件，会导致加载速度慢等问题。
这种状况基本很少把，一般都是一开始把网站框架搭好，临时遇到什么修改的就这种情况，也不可预料。代码怎么实现图上的效果呢，可以详细讲一下吗？
不限制body的宽度，然后在每个模块设置相应的宽度即可。、
另外，不推荐使用分辨率非常高，或者文件特别大的文件，会导致加载速度慢等问题。
这种状况基本很少把，一般都是一开始把网站框架搭好，临时遇到什么修改的就这种情况，也不可预料。代码怎么实现图上的效果呢，可以详细讲一下吗？
轮播的图片一般都是宽高一致的，对于你说的那种效果，可以参考一下dnspod.cn,那个轮播，中间的图片是固定的，其余都是背景色。
代码里面实现的效果：
示例效果就懒得优化了，大概意思是这个。
<!DocTYPE HTML><html> <head> <meta charset="utf-8"/> <title>img</title> <style type="text/css"> .content{ width:50%; background-color: red; } .lunbo{ width:100%; background-color: blue; } </style> </head> <body> <div class="content"> fdsaflkdsa11202112101lfdskaljfdsalkfjdsalkfdjsaklfdsadfsaas </div><div class="lunbo"> fdsaflkdsalfdskaljfdsalkfjdsalkfdjsaklfdsadfsaas </div></body></html> 客户端的设备分辩率都不同的，第一首先定义标准 网格960，你其它的部分在这个warp中写入，至于1920的那个让居中显示,撑满整屏（1920的图设计也得有思路，按普扁性的分辩率来设计，把需要表达的图片内容最好在中间大小约为1200部分设计），若遇小于1920分辩的中间该表达的东西都在，其它部分隐藏了，若遇大于1920的，两边用颜色填充，即便是分辩率达到4000，你的要求也会达到，因为有颜色填充。
aaaaa
960>
1920>
bbbb
960>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.