How do I get my images to fill any canvas in css

Asked

Viewed 171 times

0

I’m not able to fill the entire css screen 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;
}

inserir a descrição da imagem aqui

css

  • Multiple images? use jquery + css is better for random and different images, if css is has no automation and only the sequence figure.

  • 1

    It’s not missing body{padding:0;margin:0}?

1 answer

1


As I mentioned before /a/144303/3635 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>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
    </div>
    <div class="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
    </div>
    <div class="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
    </div>
</div>

Using display: table for older browsers (PS.: I haven’t been able to adjust the width that exceeds 100%, but I’m trying to fix and already edit again):

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>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
    </div>
    <div class="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
    </div>
    <div class="row">
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/YM5Wu.png"></a>
        </div>
        <div class="item">
             <a href="#"><img src="http://i.stack.imgur.com/0YjCm.png"></a>
        </div>
    </div>
</div>

Note that I used:

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

This makes the images fill the content, but if you want a fill from the center, you have to remove the images and use background, example:

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

And html like this:

        <div class="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 can be useful to use the style attribute

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.