@elaineleung
Posted
Hi Kipo, what you need to do is: In img
, add height:100%
and change object-fit:contain
to object-fit:cover
so that the image won't be distorted when you add the 100% height. Contain means the container will contain the entire image even if there is white space showing, and cover means the image will cover the entire container even if parts of the image may be cropped.
In terms of cleaner code, I think if your class names are clear and descriptive enough in terms of their function, half the work is done. The other half is just in how your structure your CSS and how you group containers using the appropriate elements, especially semantic HTML elements. I think it's not absolutely necessary to name every single element, but it's important to make sure you can easily find what you need just by looking at the selector. Sometimes I'd stop working midway just to rename half my classes because I find myself getting confused due to similar names.
I might structure everything like this:
<main class="container">
<article class="card">
<div class="image">
<img>
</div>
<div class="content">
<h1 class="title"></h1>
<p class="body"></p>
<ul class="stats">
// I wouldn't give individual class names to the items here
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</article>
</main>
For the children in card
I might even change them to BEM names, like card__image
and card__content
, as this would be helpful if I'm using Sass.
Hope this helps!
Marked as helpful