Div does not respect width of img

Asked

Viewed 71 times

0

I made a div with a border bottom similar to a fold of a page. I am trying to put a centralized image but width and height is not working. I thank you very much! :)

CODE:

.boxDobrado{
background:#53A3B4; /* color de fondo */
color: #FFFFFF; /* color de texto */
overflow: hidden;
position: relative;
width: 200px; /* ancho */
height:80px;
margin-left:20px;
}
.boxDobrado:before{
background: none repeat scroll 0 0 red; /* color de fondo */
border-color: white #ccc; /* color de esquina */
border-style: solid;
border-width: 0px 0px 40px 40px;
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
}
<div class="boxDobrado">
            <img src="imagem.jpg" height="50px" width="10px"/>
        </div>

1 answer

0

From what I understand, you want to center the icone or image, just need:

.boxDobrado{
background:#53A3B4; /* color de fondo */
color: #FFFFFF; /* color de texto */
overflow: hidden;
position: relative;
margin-left:20px;
width: 200px; 

/* alterado */
height:65px;  // ajuste de acordo com o height da imagem
text-align:center;
padding-top:5px; // ajuste de acordo com o height da imagem
}
<div class="boxDobrado">
            <img src="http://findicons.com/files/icons/1035/human_o2/128/orange_add_folder_to_archive.png" height="50px" width="50px"/>
        </div>

And adjust the height according to the image size height:60px;

Example

  • thanks for commenting. más does not align. it is as if the image leaves the div.

  • what grotesque error I made. hehe worked by adding . boxDobrado img{width:50px;heght:50px;} thank you =)

Browser other questions tagged

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