CSS Grid question and Character Avatars

I am a relative newbie to HTML and CSS/Flex, so bear with me and thanks for any help with this problem.

I am trying to get character avatars as an image on the sheet, which is using CSS-Grid and Flex

However the image, while centred, can 'spill-over' the grid area. My goal is to have the image keep its aspect ratio but otherwise be contained within the grid area. So the below image shows the current state:

the HTML for the section with the avatar image is (not sure if div is needed but)

          <section class="common">
            <div class="image">
              <img alt="Character Avatar" name="attr_character_avatar"/>
            </div>  
          </section>

and for the CSS

.common {
  grid-area: common;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

I'm not sure why you are using flex here, but i think that's a red herring.

You probably need to set a height or max-height, or both. Maybe max-height: 100% or something similar.

You might try overflow:hidden.

An important note for the css is that the .common class is the outer container (not your image), and your style settings apply to the container, not the image. When writing the css to resize the image, you'll want to make sure you're setting the styles on the image itself, as they relate to this outer container.

Usually, it's easiest to allow the container to expand its height when objects inside are too big. This would push the next row of stuff down, rather than clipping the image or other content.

I'd use something like:

/* objects inside .common will be clipped if you use overflow: hidden. */ 
.common { overflow: hidden; }  

/* to set the dimensions of all your images to a size of up to 100% of its container, and center the image if it's less than 100%.
The image will maintain proportions if you do not set a height. */

img {
margin: 0 auto;
max-width: 100%;
}

or

/* to set the dimensions of any image nested in the divs with the .common class. Use this in case you want different styles
for other images in containers set with other classes. */

.common img {
margin: 0 auto;
max-width: 100%;
}

Thanks for all the replies. The suggested changes work, and I appreciate the explanation also, helps my understanding of CSS. Trying still to wrap my head around the whole topic. 

Ah, you know - another idea to consider is using the object-fit property, which might turn out to work best for your situation. Here's a link to w3schools (which is fantastic for learning html/css). https://www.w3schools.com/css/css3_object-fit.asp

Chris said:

Ah, you know - another idea to consider is using the object-fit property, which might turn out to work best for your situation. Here's a link to w3schools (which is fantastic for learning html/css). https://www.w3schools.com/css/css3_object-fit.asp

I didn't know about object-fit...Thanks for sharing that Chris.