Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

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; }
1638838895
GiGs
Pro
Sheet Author
API Scripter
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.
1638844310

Edited 1638844358
vÍnce
Pro
Sheet Author
You might try overflow :hidden.
1638845274

Edited 1638847089
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). <a href="https://www.w3schools.com/css/css3_object-fit.asp" rel="nofollow">https://www.w3schools.com/css/css3_object-fit.asp</a>
1639015985
vÍnce
Pro
Sheet Author
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). <a href="https://www.w3schools.com/css/css3_object-fit.asp" rel="nofollow">https://www.w3schools.com/css/css3_object-fit.asp</a> I didn't know about object-fit...Thanks for sharing that Chris.&nbsp;