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

Question

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

Answer 1

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

Answer 2

可以参考借鉴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;
    }
}

Answer 3

1. 自缩放
   <img src="xxx.png" width="100%" height="100%">, 这样图片可以完整显示, 并且在拉伸浏览器的窗口时会自动缩放.但是最大只能到放大到图片的原始尺寸, 所以可以设置页面的主体宽度为banner的宽度, 超过以后内容居中对齐, 两边留白(或其它背景色)

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

我用的方式一.

Answer 4

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

Answer 5

使用百分比布局就好了

Answer 6

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

Answer 7

可不可以设置一个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;