如何实现图片全屏(当图片大小不够大时)

方法一:

背景图片全屏要点:
1.设置包裹div 高和宽为:100%
{width:100%; height:100%;}
2.设置包裹div 的 position为relative
(position:relative;)
3.设置背景图片高和宽为:100%
{width:100%; height:100%;}
4.设置背景图片position 为absolute
{position: absolute;}
5.设置背景图片z-index 为-1
{z-index:-1;}

方法二:

1.设置包裹div 的高和宽为:100%
{width:100%; height:100%;}
2.添加包裹div 的背景图片,并且从左上角开始,在x方向重复
{background:url(../img/bg_2.jpg) left top repeat-x;}
3.设置背景大小 background-size 为100%
{background-size:100% 100%;}

html代码:

<body> 

 <!--方法一-->

  <div id="divWrapper">
  <img class="bgImg" src="img/bg.jpg"/>
  <div class="content"></div>
  </div>

</body>

<!--方法二-->
<div id="divWrapper_2">
<div class="content"></div>
</div>

css代码:

/* 方法一*/

.bgImg{ width:100%; height:100%; position:absolute; z-index:-1;}
.content{ width:600px; height:700px; margin:0 auto; margin-bottom:20px; background-color:red;}

/* 方法二*/
#divWrapper_2{ width:100%; height:100%; background:url(../img/bg_2.jpg) left top repeat-x; background-size:100% 100%;}

.content{ width:600px; height:700px; margin:0 auto; margin-bottom:20px; background-color:red;}

时间: 2024-10-11 07:35:22

如何实现图片全屏(当图片大小不够大时)的相关文章

Xcode 设置图片全屏显示

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib.// UIImage *image = [UIImage imageNamed:@"initial_page_bg.jpg" ]; UIImageView *imageView = [[UIImageView alloc]initWithImage:image

手机端 — 点击图片全屏查看

在公众号中提交服务需求工单后,经过"待分配"."待执行"."执行中"."待验收" 这些阶段后,需要验收人提交评论上传图片才能变成"已完成". 做好后新增点击图片全屏查看的需求,刚开始使用的方法能够做到,但是由于 jquery 的版本冲突,所以不得已换了现在的方法. <div class="add_photo" style="margin-top: 1000px;"

CSS之生成全屏背景图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS之生成全屏背景图片</title> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundima

一款基于jQuery的全屏广告图片焦点图

之前为大家分享了很多jQuery焦点图插件.今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="banner-box"> <div class="bd"> <ul> <li style="background: #F3E5D8;"> <div

HTML+css实现图片全屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全屏图片</title> <style> div#div1{ position:fixed; top:0; left:0; bottom:0; right:0; z-index:-1; } div#div1 > img { height:1

使用fullPage做的大图片全屏滚动

本地的图片和css等文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>fullPage.js - 背景演示_dowebok</title> <!--网页的链接css <link rel="stylesheet" href="http://cdn.dowe

关于补丁宽高图片全屏垂直居中显示的问题

父级必设属性: display:table;//让子级垂直居中 text-align:center//让子级水平居中 子级必设属性: display: table-cell; vertical-align: middle; 要点:父级要给宽高,子级在父级所设的宽高之内居中显示,如果图片要全屏居中显示,父级同过JS设置成窗口大小,若不希望图片超出窗口范围,可以设置图片的最大宽高为窗口的宽高.

jquery简单的大背景banner图片全屏切换

详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上线不久,最近整理整理从前的一些小逼格的事 大背景全屏切换效果图:    大背景全屏切换效果html内容: <!--banner图片切换开始--><div class="banner"> <div class="block none">

android的Dialog全屏、activity大小的设置详解

引言:一搬的Dialog系统默认是不允许全屏的,下面我们介绍几种Dialog全屏的方式 第一. final Dialog dialog = new Dialog(WenDetailActivity.this, R.style.popupDialog); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setContentView(R.layout.wen_cover_pager); dialog.setCanceledOn