How do I make my images fill the entire screen in css

Navigation
0

I can not fill the entire screen in css with my images. 

body {
padding:0;
margin:0;
}
*{
    list-style:none;

} /* Fazendo reset */
a{
    text-decoration:none;
} /* Links sem efeitos */

/* Carecteristicas de tudo que esta dentro da Div e com Link */
#content ul li a{
    position:relative;
    font-size:14px;
    float:left;
    text-decoration: none;
}

/* Efeitos do texto */
#content ul li a p{
    color:#ffffff;
    position:absolute;
    opacity:0;
}
/* Efeito do fundo preto do texto */ 
#content ul li:hover p{
    background:rgba(0, 0, 0, 0.7);
    transition:all 0.8s ease;
    opacity:1;
    position: absolute;
    width:100%;
    height:100%;
    top: 0px;
}
p{
    font:normal 16px Tahoma, Arial, sans-serif;
}
h5{
    top: 30px;
}

#content{
    width: calc(100%);
    display: inline-block;
}

    
asked by anonymous 08.08.2016 / 20:28

1 answer

1

As I mentioned before link you can use display: flex and if you need to run in old browsers use display: table 

html, body {
  margin:0;
  padding:0;
  height: 100%;
}

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.container > .row {
    flex: 1; /*faz prencher*/
    display: flex;
    height: 100%;
    background: #fc0;
    flex-direction: row;
}

.container > .row > .item {
    flex: 1; /*faz prencher*/
    width: 25%;
}

.container > .row > .item > a {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.container > .row > .item > a img {
    display: block;
    min-width: 100%;
    min-height: 100%;
}
<div class="container">
    <div class="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div></div><divclass="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div></div><divclass="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div></div></div>

Usingdisplay:tableforolderbrowsers(PS:Ihavenotbeenabletoadjustthewidththatexceeds100%,butI'mtryingtofixitandI'malreadyeditingagain):

html, body {
  margin:0;
  padding:0;
  height: 100%;
}

.container {
    display: table;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.container > .row {
    display: table-row;
    width: 100%;
}

.container > .row > .item {
    background: #fc0;
    display: table-cell;
    width: 25%;
}

.container > .row > .item > a {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.container > .row > .item > a img {
    display: block;
    min-width: 100%;
    min-height: 100%;
}
<div class="container">
    <div class="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div></div><divclass="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div></div><divclass="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a></div><divclass="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a></div></div></div>

NotethatIused:

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

Thismakestheimagesfillthecontents,butifyouwantafillfromthecenter,youwillhavetoremovetheimagesandusebackground,forexample:

.container>.row>.item>a{background:centercenterno-repeat;background-size:cover;display:block;overflow:hidden;width:100%;height:100%;}

Andthehtmllikethis:

<divclass="item">
             <a href="#" style="background-image: url(http://i.stack.imgur.com/0YjCm.png)"></a>
        </div>
  

Note: This is one of those rare situations that might be useful to use the style attribute

    
08.08.2016 / 20:55
Keep selected a combobox with angle sqlalchemy error 1044