Cut image inside a CSS div

Question

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

Example below:

I have this css code to make the image circle:

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

To make the circle I’m using another CSS class

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

To call in the view I’m using:

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

Example of how everything is currently:

Note that the first image is distorted because it is larger in width, the others being a perfect square.

Answer 1

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

Answer 2

I believe I have some ways to solve this, one of them would be the usa div have a position: relative and a position: absolute in the image, ai vc centralizes 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 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 there are many other ways, with these two I think it’s easier for you to have some ideas than to do.