如何让banner图片适应不同屏幕大小

bitter_lime
  • 187

现在美工给的图片是1920x628的,我自己的电脑是1366x768的,
现在想要达到的效果是,不管大小笔记本屏幕或者台式机显示器,都想达到最优的观看效果,
有什么好的解决方案吗

回复
阅读 12.9k
7 个回答

有两种方案,一是整体伸缩,二是保持核心内容定宽居中,两边留白。看你自己的需求。

Montage
  • 193

可以参考借鉴bootstrap中媒体查询的思路

html文档

<div class="banner-row">
    <img src="img/banner.png" alt="" class="my-banner">
</div>

css文档,我用的less,变量你自己替换一下

.banner-row{
    img{
        display:block;
        margin:0 auto;
    }
}
@media screen and (max-width:@screen-lg){
    .my-banner {
        height: 500px;
    }
}
@media screen and (max-width:@screen-md){
    .my-banner {
        height: 400px;
    }
}
@media screen and (max-width:@screen-sm){
    .my-banner {
        height: 300px;
    }
}
@media screen and (max-width:@screen-xs){
    .my-banner {
        height: 200px;
    }
}
  1. 自缩放
    <img src="xxx.png" width="100%" height="100%">, 这样图片可以完整显示, 并且在拉伸浏览器的窗口时会自动缩放.但是最大只能到放大到图片的原始尺寸, 所以可以设置页面的主体宽度为banner的宽度, 超过以后内容居中对齐, 两边留白(或其它背景色)

  2. 将banner做为背景(css background), 这个时候可以使用css的background-positionbackground-size来调整图片的显示你自己在chrome dev tools下给这两个属性设定不同的值看一下效果就知道了.

我用的方式一.

设置banner img属性width=‘100%’

使用百分比布局就好了

使用百分比,不要把大小设置“死”

deleteMePlease
  • 154

可不可以设置一个div然后设置background?

margin: 0;
width: 100%;
background-image: xxx;
background-clip: border-box;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
background-attachment: fixed;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏