如何让图片自适应不同屏幕宽度,并居中显示

 我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式,

第一种就是常见的方式,用定位
我简单定义为三部曲:
– 让包裹图片的盒子绝对定位,
– left:50%,
– Margin-left:图片宽度的一半
看例子吧:
 

<!DOCTYPE html><html lang="en"><head>    <title>Title</title>    <style>        *{            margin: 0 auto;        }        .bannerbox {             position:relative;            overflow:hidden;            height:410px;        }        .banner {            width:2000px; /*图片宽度*/            position:absolute;            left:50%;            margin-left:-1000px; /*图片宽度的一半*/        }    </style></head><body><div class="bannerbox">    <div class="banner">        <img src="img/slide_04_2000x410.jpg">    </div></div></body></html>

第二种方式,让图片做背景图,利用背景图的background-position:center center的属性实现图片居中显示

既然让图片自适应不同的屏幕,也就是说不光是pc端还有移动端。那我就根据一个例子详细介绍一下。这里我们用bootstrap框架做一个轮播效果图,来实现图片在不同屏幕下的图片的响应式效果。

对bootstrap封装好的代码进行改进。 我们重点修改了轮播图片的内容。
一步一步来介绍:
 

!-- Wrapper for slides 轮播的图片 轮播项 --><div class="carousel-inner" role="listbox">  <div class="item active" style="background-image: url('img/slide_01_2000x410.jpg')"></div> <div class="item" style="background-image: url('img/slide_02_2000x410.jpg')"></div> <div class="item" style="background-image: url('img/slide_03_2000x410.jpg')"></div> <div class="item" style="background-image: url('img/slide_04_2000x410.jpg')"></div> </div>

我们给div设置好背景图之后,由于没有给div设置高度,背景图是看不到的。所以做如下调整:

#main_ad > .carousel-inner > .item{    height: 410px;    background-repeat:no-repeat;    background-position: center center;    background-size: cover;}

简单解释一下:background-size
因为我们要考虑 :万一我们的背景图片没有410的高度,图片有可能只是居中展示一小块,所以用background-size去控制一下。
语法:background-size: length|percentage|cover|contain;

这样就可以让图片自适应了,但是还是不够的,为什么呢。我们要知道:
实现图片响应式的目的是:各种终端都需要正常显示图片;移动端应该使用更小的图片,小指体积
如果我们用手机端去访问我们的页面,那么就需要把图片下载到本地,这就要需要流量 用户肯定希望流量越少越好啊。如果下载了超大的图,其实是并不需要的,那岂不是浪费很多流量。 那我们就希望针对不同的屏幕使用不同的图片, 大屏幕用大图,小屏幕呢就是用小图
针对pc端 图片自适应(因为pc端也有不同尺寸的屏幕),针对移动端就做一个单独的图片。
解决思路:
当屏幕的尺寸发生变化的时候,我们获取一下屏幕的宽度,当屏幕的宽度小于一定的值我们就认为是手机屏幕,就显示小图 ;大于一定尺寸就认为是pc端 使用大图。
但是一开始就不能显示图片吧,图片应该动态加载图片。div在某种状态显示某种图片,应该根据div的属性去展示吧 这就用使用data-属性,data属性专门记录与div相关的属性
代码修改为:

 

<!-- Wrapper for slides 轮播的图片 轮播项 --><div class="carousel-inner" role="listbox">    <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>    <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>    <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>    <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div></div>

需要小图的时候,尺寸等比例变化,所小图时使用img方式,在div中添加img标签。同时当使用小图的时候,父盒子的高度就不为410px了,这可以用媒体查询的方式控制盒子的高度。
当图片不足以撑满整个盒子时,图片的宽度为100%
css代码:

/*轮播项*/#main_ad{ } #main_ad > .carousel-inner > .item{     background-repeat:no-repeat;    background-position: center center;    background-size: cover;}@media (min-width: 768px) {    #main_ad > .carousel-inner > .item{        height: 410px;    }}#main_ad > .carousel-inner > .item > img{    width:100%;}

data-属性并不起作用,仅仅是记录数据的。当要显示图片时,用js脚本在不同屏幕下显示不同的图片尺寸。
js代码(这里用的是jquery):

$(function () {   function resize() {       //获取屏幕宽度       var windowWidth = $(window).width();       //判断屏幕的大小       var isSmallScreen = windowWidth < 768;       //根据大小为界面上的每一张轮播图设置背景       $('#main_ad > .carousel-inner > .item').each(function (i,item) {          //因为获取的是dom对象,要把DOM对象转换成jquery对象           var $item = $(item);           //根据屏幕的大小来获取不同的图片 data()函数就是专门获取data属性的           var imgSrc =               isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');           //获得data属性后,给div设置背景图片           $item.css('backgroundImage', 'url("' + imgSrc + '")');           // 针对移动端,尺寸需要等比例变化,所以小屏幕使用img方式 ,在div中添加img标签           if (isSmallScreen){               $item.html('<img src="'+imgSrc+'" alt="小图"/>')           } else{               // 当屏幕由小到大切换时,清空div中的img标签               $item.empty();           }       });   }     $(window).on('resize', resize).trigger('resize');});

未经允许不得转载:淏予工作室 » 如何让图片自适应不同屏幕宽度,并居中显示

赞 (3) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏