精华内容
下载资源
问答
  • css 如何让图片全屏的问题

    千次阅读 2017-05-22 10:54:54
    css 如何让图片全屏的问题 例如我有一张1024*768的图片,能否它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想这张图片全屏,如何实现? 1、如果楼主只是将其当做一张图片显示,可以通过css...


    例如我有一张1024*768的图片,能否让它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想让这张图片全屏,如何实现?

    1、如果只是将其当做一张图片显示,可以通过css控制,如img{width:100%;height:100%;}.
    否则需要将其作为网页背景的话可以试试如下方法:

    2、如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用<body 
    style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。
    这时可以拐个弯,设置两层div,底层div当做背景使用,放置一张图片即可。
    <div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
    再将网页内容放置到第二层上<div id="content">页面内容</content>

    3、网页背景图片默认情况下是重复平铺满整个页面。上面2方法是要求图片不重复,但又得占满浏览器所采用的方法。



    示例代码:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <style type="text/css">
            
        .myLongDiv 
        {
          top:80%;
          left:60%;
          border:1px;
          border-style:solid;
          border-color:White;
          position:absolute;
          width:240px;
          height:120px;
          margin:-250px 0 0 -200px;
          font-size:20px;
        }  
       
        </style>

     


    </head>


    <body bgcolor="#113eee">
        <form id="form1" runat="server">


     

        <div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="/images/myPicture1.jpg" width="100%" height="100%"/>
         </div>
           
         <div class="myLongDiv" >
        <table>
        <tr>
        <td align="right" class="style1">用户名:</td><td class="style1">
            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
        </tr>
        <tr><td align="right">密码:</td><td>
            <asp:TextBox ID="txtPassWord" runat="server"></asp:TextBox></td></tr>
        </table>
        <br />
            <div> 
            <center>
                <asp:Button ID="btnLogin" runat="server" Text="登录" Width="56px" BackColor="White" BorderColor="White" 
                    οnclick="btnLogin_Click" /> &nbsp &nbsp
                <asp:Button ID="btnCancle" runat="server" Text="取消" Width="63px" BackColor="White" BorderColor="White" />
            </center>
            </div>
       </div>

        </form>
    </body>
    </html>
    展开全文
  • 一张清晰漂亮的背景图片能给网页加分不少...以下是用css实现图片全屏显示的方法: html: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-

    一张清晰漂亮的背景图片能给网页加分不少,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。

    以下是用css实现图片全屏显示的方法:

    html

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>title</title>
    </head>
    <body>
    <div>
        <!--背景图片-->
        <div id="web_bg"></div>
        <!--其他代码 ... -->
    </div>
    </body>
    </html>

    css

    #web_bg{
      position:fixed;
      top: 0;
      left: 0;
      width:100%;
      height:100%;
      min-width: 1000px;
      z-index:-10;
      zoom: 1;
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-position: center 0;
    }

    下面,我们来分析一下,css中每句代码的作用是什么:

    position:fixed;  
    top: 0;  
    left: 0;

    这三句是让整个div固定在屏幕的最上方和最左方

    width:100%;  
    height:100%;  
    min-width: 1000px;

    上面前两句是让整个div跟屏幕实现一模一样的大小,从而达到全屏效果,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,也就是说在这种情况下,缩放屏幕宽度时,图片不要缩放(只有在1000px以内才有效)。

    z-index:-10;

    这个的目的是让整个divhtml页面中各个层级的下方

     background-repeat: no-repeat;

    上面这个是背景不要重复

    background-size: cover;
    -webkit-background-size: cover; 
    -o-background-size: cover;

    上面三句是一个意思,就是让图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。

    background-position: center 0;

    上面这句的意思就是图片的位置,居中,靠左对齐。

    展开全文
  • 错误的写法:加到div中结合图片设置min-height,但是页面不会回弹 话不多说直接上代码 终极方案 html,body{ width:100%; height:100% } 再加一段 body{ font-family: &amp;amp;amp;quot;华文细...

    用什么代码实现?不允许有白色底色产生,因为手机高度不一样

    设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面

    错误的写法:加到div中结合图片设置min-height,但是页面不会回弹

    终极方案

    html,body{
    	width:100%;
    	height:100%
    }
    
    body{
      font-family: "华文细黑";
      background:url("../img/Flyer-bg.png") no-repeat;
      background-size: 100%;
    }
    

    其他方案

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%">  
        <img src="https://www.qianbuxian.com/uploads/banners/20171214085954_shouye5.jpg" width="100%" height="100%"/>  
    </body>
    </html>
    

    清除浮动

    .float-left {
        float: left;
    }
    .float-right {
        float: right;
    }
    .clear-fix:after {
        display: table;
        content: '';
        clear: both;
    }
    
    展开全文
  • 图片全屏查看组件

    千次阅读 2019-04-30 23:14:08
    图片全屏查看组件前言环境效果如下目录结构代码 前言 在一些博客网站上,经常能看到点击图片,然后图片全屏展示,再次点击屏幕,图片还原,现在就要完成这样的组件。 环境 vue2.5 webpack3.6 less 效果如下 目录...

    前言

    在一些博客网站上,经常能看到点击图片,然后图片全屏展示,再次点击屏幕,图片还原,现在就要完成这样的组件。

    环境

    • vue2.5
    • webpack3.6
    • less

    效果如下

    在这里插入图片描述

    目录结构

    src/index.vue
    src/ImageFullscreen.vue
    

    代码

    <!-- ImageFullscreen.vue -->
    /*
     * 图片全屏查看组件
     * @Author: wujiang
     */
    <template>
      <section class="background" v-if="show" @click="onZoomIn">
        <img ref="img" :src="url" :height="height">
      </section>
    </template>
    
    <script>
    export default {
      props: {
        url: {
          type: String,
          required: true
        },
        show: {
          type: Boolean,
          required: true
        }
      },
      data () {
        return {
          height: null
        }
      },
      watch: {
        show (n) {
          if (n) {
            this.init()
          }
        }
      },
      methods: {
        async init () {
          await this.$nextTick()
          const img = this.$refs.img
          this.height = img.naturalHeight
        },
        onZoomIn () {
          this.$emit('zoomin')
        }
      }
    }
    </script>
    
    <style lang='less' scoped>
    .background{
      position: fixed;
      cursor: pointer;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(55,55,55,.6);
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img{
      cursor: zoom-out;
    }
    </style>
    
    <!-- index.vue -->
    /*
     * 图片全屏查看组件演示
     * @Author: wujiang
     */
    <template>
      <section>
        <img :src="url" :height="height" @click="show = true">
        <image-fullscreen :url="url" :show="show" @zoomin="onZoomIn"></image-fullscreen>
      </section>
    </template>
    
    <script>
    import ImageFullscreen from './ImageFullscreen'
    export default {
      components: {
        ImageFullscreen
      },
      data () {
        return {
          url: 'https://img-blog.csdnimg.cn/20190222065159142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcm1zd29ydGgyMDE2,size_16,color_FFFFFF,t_70',
          height: 100,
          show: false
        }
      },
      methods: {
        onZoomIn () {
          this.show = false
        }
      }
    }
    </script>
    
    <style lang='less' scoped>
    img{
      cursor: zoom-in;
    }
    </style>
    
    展开全文
  • Android 图片浏览全屏缩放

    千次下载 热门讨论 2014-05-10 23:18:39
    高仿现在主流的图片浏览的全屏缩放效果。如QQ好友动态、微信朋友圈。
  • 实现点击图片放大全屏

    千次阅读 2016-05-09 16:17:14
    最近遇到这个问题,点击图片,让图片全屏。参考了一些博客和源码,大概明白了是怎么实现这个效果的。 这里就简单说明一下: 原理和之前的实现修改头像有点类似:修改头像的时候,我们给imageView添加一个手势事件...
  • 图片全屏预览实现

    千次阅读 2017-10-20 14:26:34
    要实现图片全屏预览,主要知识点有一下几个: (1)点击图片弹出弹出层 (2)获取已点击图片图片地址 (3)弹出层样式处理(包括背景透明度、图片居中等) (4)点击屏幕弹出层消失 代码实现: HTML:主要...
  • 在css中如何一个图片铺满全屏

    万次阅读 2013-05-25 08:33:23
    css 如何让图片全屏的问题 例如我有一张1024*768的图片,能否它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想这张图片全屏,如何实现? 1、如果楼主只是将其当做一张图片显示,可以通过...
  • 背景图片全屏居中

    2017-04-13 11:23:19
    背景图片全屏居中background: url(./images/xxxx.jpg)no-repeat center center fixed; background-size: cover;
  • ImageView的图片全屏填充

    千次阅读 2015-10-19 21:29:16
    好吧就一个属性,但这是图片在imageview这个控件里面全部填充 android:scaleType="fitXY" 如果想把title去掉或者显示信号那部分也去掉,可以再百度  requestWindowFeature(Window.FEATURE_NO_TITLE);//...
  • 关于网页背景图片全屏显示处理

    千次阅读 2016-08-04 13:13:59
    我们在写网页是有的时候需要背景图片全屏显示。但是图片的大小不够的话我们设置为背景图片不重复的情况下图片不会全屏显示 我们可以这样处理 设置两层div,底层div当做背景使用,放置一张图片即可。 id=...
  • 怎么电脑上的图片全屏显示呢

    千次阅读 2017-11-21 19:32:00
    怎么电脑上的图片全屏显示呢 利用windows图片查看器打开图片,然后按F11键,即可 本文转自 烂泥行天下 51CTO博客,原文链接:http://blog.51cto.com/ilanni/762528 ...
  • CSS3图片全屏显示

    千次阅读 2018-08-07 15:03:16
    CSS3图片全屏显示js插件下载
  • Android 图片全屏适配各种屏幕小技巧

    千次阅读 2019-04-18 10:50:47
    场景: App启动页加载一张从网络上下载的图片,全屏展示。...图片全屏展示如何适配各种屏幕? 解决方法: 1.图片周围采用高斯模糊处理,其他地方全部用白色填充。 2.图片周围采用白色渐变,其他地方全用白色填充。 ...
  • 最近遇到这个问题,点击图片,让图片全屏。参考了一些博客和源码,大概明白了是怎么实现这个效果的。 这里就简单说明一下: 原理和之前的实现修改头像有点类似:修改头像的时候,我们给imageView添加一个手势事件,...
  • ImageView图片全屏显示

    2014-09-09 16:26:49
    其实就一个属性的事儿
  • Android 图片全屏

    千次阅读 2014-02-28 16:00:23
    方式一: 在xml的布局文件的根元素设置属性background 方式二:  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:scaleType="fitXY" ... android:src=
  • <!doctype html> 手机端点击图片全屏预览 <div class="category"> <img src="1.jpg" class="pic" width="300px"> ...
  • 在启动页加载一个全屏广告图片,要适配不同的机型。 问题: 如何适配不同的机型? 解决方法: 不要做满屏的图片,最好图片内容居中,周围留上纯色,就可以适配所有屏幕。可以参考淘宝、京东等。 ...
  • 图片放大到全屏

    2015-10-16 20:41:29
    android 图片点击一下就放大到全屏,再点一下就回到原界面
  • vue 图片全屏展示

    2020-12-01 16:49:04
    <template> <div id="hItem1" :style="{ height: screenHeight + 'px'}"> <div class="mainK"> <img :style="{ height: screenHeight + 'px'}" src="@/images/home/item1/banner.png" alt=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,627
精华内容 24,650
关键字:

怎么让图片全屏