学校子站的内部标准模板设计了非常多的横向全屏广告焦点图，在我们的默认样式里面主要分为两种，

一是，采用【广告版位-背景焦点图】标签，使用background:(img) no-repeat center,固定li高度,再依据宽度采用居中显示的方法，大部分是使用这种，标签如下。

@Power.Partial("广告版位-背景焦点图",new{ Id=1,TitleLength=0,ImageWidth=1920,ImageHeight=500})

二是使用【广告版位-焦点图】标签，图片设置position: absolute; left:50% 依靠margin:负数值来根据分辨率裁剪图片。

@Power.Partial("广告版位-焦点图",new{ Id=1,TitleLength=0,ImageWidth=1920,ImageHeight=500})

这2种方式的都可以实现图片不出现滚动条等兼容问题，但只能保障显示器分辨率以内的内容正常显示，都是以裁剪2边内容为代价。所以在进行配置时，如果是自己配图，最通用的做法是把主要内容设置在主体分辨率以内，确保被裁剪内容不影响主体内容的形象展示。但实际项目交付使用后，客户会有自行上传图片操作，这时就会遇到被裁剪的内容，影响整体图片识别和传达度。如下图。

这是客户按我们宽高要求1920*500制作的一张图片，但是把校徽和校训都设置在图片边缘，实际前台展示，显示器达不到1920px分辨率，会严重影响图片的识别图。

这情况下使用【广告版位-背景焦点图】背景图居中来定义不是很合适。【广告版位-焦点图】会更合适一些，在样式的设置上我们可以设置如下：

#indBanner {position: relative;}
#indBanner .hd{position: absolute; width: 100%; height: 14px; left:0; bottom: 40px; zoom: 1; text-align: center; }
#indBanner .hd li{ display: inline-block; *display: inline; width: 14px; height: 14px; background: #fff; margin: 0 5px; cursor: pointer; border-radius:100%; vertical-align: top; }
#indBanner .hd li span{ display: none;}
#indBanner .hd li.on { background-color: #efb700; }
#indBanner .bd li { min-width: 1200px; width: 100%; text-align: center;}
#indBanner .bd li img {width: 100% !important; height: auto !important; max-width: 1920px;}
#indBanner .bd li .con{ display: none;}

不固定整个广告版位的高度，设置图片的宽度在1920px 以内 100%，并设置最小宽度，居中显示，图片高度根据宽度等比缩放。

可以很好的规避两边内容被裁剪，而且根据分辨率相对应的缩放高度占比，对小分辨率用户，不至于因固定的图片高度太大而影响友好度。