I am currently in the process of creating a test webpage to improve my skills in html/css. I'm trying to figure out how to make an image conform to the shape of the border on the page. Despite my efforts, it seems like the image is not perfectly centered within the border. Adjusting the size of the image only exacerbates this issue and causes it to appear more towards the middle of the page rather than within the confines of the border, which is not the desired outcome. I just want the image to fit seamlessly within the border without any parts protruding outside of it. However, achieving this seems to be posing some challenges for me.
Is there a way for me to ensure that the image is accurately centered and completely fills the entire border without any part being left hanging or exceeding the border's boundaries?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>