<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .main{
            width: 100%;
        }
        .box-wrap div{
            border: 1px solid #000;
        }
        /*  解决使图片全屏显示有空白边距的问题
        
           1，col 设置内边距为0
           2，图片设置 width:100% 
        */
        .p-0{
            padding: 0;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row box-wrap">
            <div class="col-md-12 col-xs-12 p-0">
                <img src="./images/bg1.jpg" alt="" class="img-responsive">
            </div>
            <div class="col-md-12 col-xs-12">.col-md-1</div>
            <div class="col-md-12 col-xs-12">.col-md-1</div>
        </div>
    </div> 
    <div class="main">
        <div class="container">
           
        </div>        
    </div>
</body>
</html>

bootstrap : 解决使图片全屏显示有空白边距的问题的更多相关文章

  1. iOS开发——点击图片全屏显示

    点击图片,全屏显示,然后再点击屏幕一下,返回. 没啥难的,直接上代码: // //  ViewController.m //  Demo-hehe // //  Created by yyt on 1 ...

  2. Xcode 设置图片全屏显示

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  3. banner图片全屏显示

    <script> $(function () { function reinitSize() { var window_h = $(window).height(); var window ...

  4. HTML设置body背景图片全屏显示

    在head标签中添加body属性设置: <head><style>body{background:url(timg1.jpg) top left;background-size ...

  5. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  6. HBuilder开发iPad程序不能全屏显示的解决方法

    HBuilder开发iPad程序不能全屏显示的解决方法: targets选择HBuilder=>Deployment Info=> devices选择Universal即可

  7. vmware 下 ubuntu 不能全屏显示 的解决方法

    vmware 下 ubuntu 不能全屏显示 在 vmware 下 安装 ubuntu后,默认分辨率是 800 * 600,可以设置以全屏显示: 设置步骤: vmware 下启动 虚拟机,即 启动 u ...

  8. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

  10. QT5中全屏显示子窗口和取消全屏的方法

    问题描述:用QT5做了个MDI多窗体应用程序,想把子窗体全屏显示,用网上的方法,但总是遇到问题. 网上的解决方法原文在这:http://www.cnblogs.com/Rick-w/archive/2 ...

随机推荐

  1. 当数字孪生系统接入CesiumJS，将为智慧城市项目带来怎样的改变？

    数字孪生系统接入CesiumJS的契机,正是智慧城市项目的需要.因为许多智慧城市项目中包含了大量地形.倾斜摄影.DOM.DEM等GIS数据,那么为了能够在数字孪生系统中导入这些GIS数据,同时让这些数 ...

  2. ElasticSearch之Index modules

    索引的参数,分为两类: 静态参数,仅支持在创建索引时指定,或者关闭索引后指定. 动态参数,允许在索引工作期间指定或者修改. 静态参数 index.number_of_shards 默认值为1. 本参数 ...

  3. DES加密算法优缺点大揭秘：为何它逐渐被取代？

    一.引言 DES(Data Encryption Standard)加密算法作为一种历史悠久的对称加密算法,自1972年由美国国家标准局(NBS)发布以来,广泛应用于各种数据安全场景.本文将从算法原理 ...

  4. Angular 实现分页器组件

    很感谢 angular实现简单的pagination分页组件 - Amor丶Diamond - 博客园 (cnblogs.com) , 我根据这位博主代码做了修改, 增加了跳转和每页行数功能. 先看图 ...

  5. 24、去除右上方的debug图标

    class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext ...

  6. 14、Flutter Card卡片组件

    Card是卡片组件块,内容可以由大多数类型的Widget构成,Card具有圆角和阴影,这让它看起来有立 体感. Card实现一个通讯录的卡片 class MyApp2 extends Stateles ...

  7. 华为云FusionInsight MRS：千余节点滚动升级业务无中断

    摘要:滚动升级作为大集群数据底座的必备能力,能够完美解决了传统大数据平台操作繁琐.业务停机.升级成本高等问题,实现一个架构的持续演进,业务无中断. 华为开发者大会2021(Cloud)大会期间,由华为 ...

  8. OCR性能优化：从认识BiLSTM网络结构开始

    摘要: 想要对OCR进行性能优化,首先要了解清楚待优化的OCR网络的结构,本文从动机的角度来推演下基于Seq2Seq结构的OCR网络是如何一步步搭建起来的. 本文分享自华为云社区<OCR性能优化 ...

  9. java并发编程(1)：Java多线程-基本线程类-基础知识复习笔记

    复习资料:<同步与异步:并发/并行/进程/线程/多cpu/多核/超线程/管程 > 基本线程类 基本线程类 基本线程类指的是Thread类,Runnable接口,Callable接口 继承T ...

  10. WebKit三件套(1)：WebKit之WebCore篇

    导语: Chrome浏览器的代码量其实是非常庞大的,要想对其有深入的理解,仅仅编译编译调试调试,是很难深入下去的.让我们还是从其主要部分如多进程管理通信.WebKit.V8.Skia.WinHttp. ...