Maintain the aspect ratio of an image that is within a circle - css

Question

I am trying to make basic CSS challenges. In this case I have an image that I have given a circle, but I do not know what to do so that it retains its aspect ratio, does not fully cover the entire circle and is centered. This is the code I have. I want to learn a way to achieve this effect with any image of any resolution.
Desired effect:
img{
border-radius:50%;
width:300px;
height:300px;
border: solid 1px black;
}
.image_container{
display:flex;
justify-content:center;
align-items:center;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>

Answer 1

Set the sizing condition on the container rather than the image.
img{
width: 100%;
height: auto;
}
.image_container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
padding: 30px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>

Answer 2

You are using CSS on img that should be on .image-container. Then, you can set width for image enough to be centered and not override the circle, like this:
.image_container {
width:300px;
height:300px;
border-radius:50%;
border: solid 1px black;
display:flex;
justify-content:center;
align-items:center;
}
img {
width: 70%;
}

Answer 3

Maybe something like that?
* {
box-sizing: border-box;
}
img {
padding: 30px;
position: absolute; top: 50%; left: 0;
transform: translateY(-50%);
width: 100%;
}
.image_container {
border-radius: 50%;
border: solid 1px black;
overflow: hidden;
position: relative;
width: 300px; height: 300px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>

Answer 4

Outline
Wrap <img> tag in a block level tag and then wrap that tag with another block level tag:
<section class="frame">
<figure class="logo">
<img class="image">
...
Assign the top ancestor tag (demo. section.frame)
position: relative;
width: 50vw;
height: 50vw;
Basic CSS positioning -- parent is relative -- child is absolute -- child references its relative parent's area for X, Y position. The value: 50vw is equivalent to 50% of viewport width. This makes the tag responsive and it will dynamically change it's dimensions and maintain aspect ratio whenever the viewport width changes.
Assign the parent tag of <img> tag (demo. figure.logo)
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
This positions it to the edges of section.frame.
Assign the <img> the following:
display: block;
width: 100%;
height: 100%;
object-fit: contain;
This will position img.image to the edges of figure.logo
Added a :hover effect to show how the img tag fits within the figure and section tags. Each tag is assigned border-radius: 50% so that there are no square corners overlapping the visible border on section.frame.
.frame {
position: relative;
width: 50vw;
height: 50vw;
border: 3px solid #B9BBC0;
border-radius: 50%;
}
.logo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
}
.image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
.frame:hover {
background-color: #000;
}
<section class='frame'>
<figure class='logo'>
<img class='image' src='https://danikalaw.com/wp-content/uploads/2017/08/r.png'>
</figure>
</section>
References
Viewport CCS Concepts
object-fit: contain property
position property