I recently had an issue with resizing a circular image to create a thumbnail without cropping it in the border. How can I achieve this using CSS?
Below is my CSS code for creating a circular image from a rectangular one:
.thumbBox{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
box-sizing: border-box;
border: 1px solid rgb(102, 102, 102);
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
background: none repeat scroll 0% 0% transparent;
border-radius: 50%;
}
And here is the CSS code I used for the thumbnail:
img {
width: 40px;
height: 40px;
margin: 0;
}