如何使背景图像覆盖整个屏幕并忽略CSS中的宽高比

时间:2017-09-27 17:44:21

标签: css

background-size: cover属性使图像占据整个屏幕,但它保持纵横比,因此在较大的屏幕上只能看到一部分图像。 如何让它忽略纵横比,以便图像占据整个屏幕并且整个图像都可见?

HTML:

<html>
<head>


<link href="styles.css" rel=stylesheet>

 <title>
 Enjoy ;)
 </title>
</head> <script type="text/javascript" src="getBG.js"></script></head>
 <body>

    <div class="intro">
        <div class="textbg">
    <div class="introText">
     Welcome to PicShare
     </div>

     <div class="introDesc">
        Today's theme is 
     </div>
     </div>
    </div>



<div class="back"> </div>

<div class="bg1" onclick="genBg()"><script>genBg()</script></div>




 </body>

</html>

CSS:

html{
margin: 0px;
height: 100%;
}

body{
height: 100%;
margin: 0px;
background-color: #424242;

}

.intro{           //want this background to take up entire screen 
    height:100%;
    background-color: #424242;
    background-image: url("assets/themes/theme1.jpg"); 
    background-repeat: no-repeat;
    background-size:  cover;
    }

2 个答案:

答案 0 :(得分:2)

您使用background-size: 100% 100%执行此操作,分别表示背景区域宽度和高度的100%。

答案 1 :(得分:1)

您可以选择将background-size属性设置为以下内容:

  • 百分比或像素(#%#%/ #px #px)
  • 包含

封面允许您缩放图像以覆盖整个身体,而包含只会缩放图像,以便整个图像仍然可见。

HTML

General
Complete name                            : Metadata Error.mov
Format                                   : YSDO
Codec ID                                 : YSDO (qt  /YSDO)
File size                                : 1.10 TiB
Duration                                 : 24 h 10 min
Overall bit rate mode                    : Variable
Overall bit rate                         : 111 Mb/s
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
Writing library                          : mtrx

Video
ID                                       : 1
Format                                   : ProRes
Format version                           : Version 0
Format profile                           : 422
Codec ID                                 : apcn
Duration                                 : 24 h 10 min
Bit rate mode                            : Variable
Bit rate                                 : 101 Mb/s
Width                                    : 1 920 pixels
Clean aperture width                     : 1 888 pixels
Height                                   : 1 080 pixels
Clean aperture height                    : 1 062 pixels
Display aspect ratio                     : 16:9
Clean aperture display aspect ratio      : 16:9
Frame rate mode                          : Constant
Frame rate                               : 29.970 (29970/1000) FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:2
Scan type                                : Interlaced
Scan type, store method                  : Interleaved fields
Scan order                               : Top Field First
Bits/(Pixel*Frame)                       : 1.633
Stream size                              : 1.00 TiB (92%)
Writing library                          : apm0
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
Color primaries                          : BT.709
Transfer characteristics                 : BT.709
Matrix coefficients                      : BT.709
matrix_coefficients_Original             : BT.709

Audio #1
ID                                       : 2
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

Audio #2
ID                                       : 3
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

Audio #3
ID                                       : 4
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

Audio #4
ID                                       : 5
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

Audio #5
ID                                       : 6
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

Audio #6
ID                                       : 7
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

Audio #7
ID                                       : 8
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

Audio #8
ID                                       : 9
Format                                   : PCM
Format settings                          : Little / Signed
Format settings, Endianness              : Little
Format settings, Sign                    : Signed
Codec ID                                 : in24
Duration                                 : 24 h 10 min
Source duration                          : 24 h 10 min
Bit rate mode                            : Constant
Bit rate                                 : 1 152 kb/s
Channel(s)                               : 1 channel
Sampling rate                            : 48.0 kHz
Bit depth                                : 24 bits
Stream size                              : 11.7 GiB (1%)
Source stream size                       : 11.7 GiB (1%)
Language                                 : English
Encoded date                             : UTC 2017-09-24 23:48:33
Tagged date                              : UTC 2017-09-26 09:23:29
mdhd_Duration                            : 66187116

CSS

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

https://jsfiddle.net/ef8cszhw/