Cut image inside a div in CSS

Question

Cut image inside a div in CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I need any image size to be centered inside the div:

Example below:

I'mhavingthiscsscodetodotheimagecircle:

.anuncio_dialogo{background-color:#FFF;width:128px;height:128px;margin-bottom:5px;}

TomakethecircleI'musinganotherCSSclass

.img-circle{border-radius:50%;}

TocallintheviewI'musing:

<imgsrc="<?=base_url() . $anuncio->imagemPrincipal?>" class="anuncio_dialogo circle">

Example of how everything is currently:

See that the first image is distorted because it is larger in width, and the others are a perfect square.

php css css3

asked by anonymous 07.12.2016 / 00:44

2 answers

1

You can use background-image along with background-size to adjust the image Changing scale background images

07.12.2016 / 02:07

How to change the format of a query result? putting parcel value into dynamically created input

score 0 · Accepted Answer

I think I have some ways to solve this, one of them would be to use div having a position: relative and a position: absolute in the image, then you can centralize using margin and top

Ex:

<div class="container-image">
   <img src="source-image.jpg" class="centralize-image" />
</div>

Ai no css:

.container-image{  
    width: 128px;   
    height: 128px;   
    position: relative;  
    overflow: hidden;  
}

.centralize-image{  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    margin-top: -(ALTURA-IMAGEM / 2)px;  
    margin-left: -(LARGURA-IMAGEM /2)px;  
}

See the example above running on JSFIDDLE

Or use the image as background in the css ex:

<div class="container-image"></div>


.container-image{  
    width: 128px;   
    height: 128px;   
    position: relative;  
    overflow: hidden; 
    background: url(source-image.jpg) no-repeat center center; 
}

See the example above running on JSFIDDLE

If you think about it you have many other ways, with these two I think it's easier for you to have some ideas of what to do.