如何让图片自适应不同屏幕宽度,并居中显示。
2017-07-07 21:31
375 查看
我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式,
- 让包裹图片的盒子绝对定位,
- left:50%,
- Margin-left:图片宽度的一半
看例子吧:
对bootstrap封装好的代码进行改进。 我们重点修改了轮播图片的内容。
一步一步来介绍:
我们给div设置好背景图之后,由于没有给div设置高度,背景图是看不到的。所以做如下调整:
简单解释一下:background-size
因为我们要考虑 :万一我们的背景图片没有410的高度,图片有可能只是居中展示一小块,所以用background-size去控制一下。
语法:
这样就可以让图片自适应了,但是还是不够的,为什么呢。我们要知道:
实现图片响应式的目的是:各种终端都需要正常显示图片;移动端应该使用更小的图片,小指体积
如果我们用手机端去访问我们的页面,那么就需要把图片下载到本地,这就要需要流量 用户肯定希望流量越少越好啊。如果下载了超大的图,其实是并不需要的,那岂不是浪费很多流量。 那我们就希望针对不同的屏幕使用不同的图片, 大屏幕用大图,小屏幕呢就是用小图
针对pc端 图片自适应(因为pc端也有不同尺寸的屏幕),针对移动端就做一个单独的图片。
解决思路:
当屏幕的尺寸发生变化的时候,我们获取一下屏幕的宽度,当屏幕的宽度小于一定的值我们就认为是手机屏幕,就显示小图 ;大于一定尺寸就认为是pc端 使用大图。
但是一开始就不能显示图片吧,图片应该动态加载图片。div在某种状态显示某种图片,应该根据div的属性去展示吧 这就用使用data-属性,data属性专门记录与div相关的属性
代码修改为:
需要小图的时候,尺寸等比例变化,所小图时使用img方式,在div中添加img标签。同时当使用小图的时候,父盒子的高度就不为410px了,这可以用媒体查询的方式控制盒子的高度。
当图片不足以撑满整个盒子时,图片的宽度为100%
css代码:
data-属性并不起作用,仅仅是记录数据的。当要显示图片时,用js脚本在不同屏幕下显示不同的图片尺寸。
js代码(这里用的是jquery):
完整html代码:
ok,通过以上方式就可以实现图片的居中显示并产生响应式效果。
第一种就是常见的方式,用定位
我简单定义为三部曲:- 让包裹图片的盒子绝对定位,
- 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;
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 “auto”。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 “auto”。 |
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):
/** * Created by Administrator on 2017/6/28. */ 'use strict' $(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'); });
完整html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>轮播图</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--广告轮播-->
<div id="main_ad" class="carousel slide" data-ride="carousel">
<!-- Indicators活动指示器 下面的小圆点 -->
<ol class="carousel-indicators">
<li data-target="#main_ad" data-slide-to="0" class="active"></li>
<li data-target="#main_ad" data-slide-to="1"></li>
<li data-target="#main_ad" data-slide-to="2"></li>
<li data-target="#main_ad" data-slide-to="3"></li>
</ol>
<!-- 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>
<!-- Controls 控制 左右的控制按钮-->
<a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script> <!--我们自己写的js-->
</body>
</html>
ok,通过以上方式就可以实现图片的居中显示并产生响应式效果。
相关文章推荐
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
- 为适应不同屏幕的宽度,datagrid用百分比设置宽度,无法事先知道各列的PX值,如何用样式控制内容的截取
- ios UIWebView中如何让图片大小适应屏幕宽度
- Android--WebView显示Html,让其中的图片适应屏幕宽度
- css-当图片宽度大于父元素宽度时如何使图片居中显示
- CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
- 如何让图片居中显示。让图片只适应居中。
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
- 两个并排的DIV 左面一个的width=175 右面的那个DIV如何自适应不同分辨率填充满屏幕
- css如何使body背景图片适合所有大小宽度的屏幕
- Android是如何在不同屏幕上适配图片的 -- 或控件大小
- Android 中,应用程序需要的图片资源如何针对不同屏幕大小手机设计?
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
- 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
- 如何利用TTThumbsViewController实现显示不同数量的图片?
- .NET软件之如何将图片按照屏幕/控件的指定大小显示
- 如何实现mdi窗口中显示图片上部居中
- 固定宽度 高度的页面在不同分辨率的屏幕上垂直 水平居中