Working with Images in HTML & CSS

Images are some of the more frustrating elements to work with when working in HTML and CSS. There are some tricks to crop and resize images using CSS.

However, it's important to understand how HTML treats images. Here's a few key rules:

1. Images will appear at their native resolution by default. If you have an images that is 1800px by 1200px, it will appear exactly 1800px by 1200px, which is not ideal.
2. Images are the #1 culprit of slow page load speed. Generally speaking, image files should be as small as possible. I tend to shoot for less than 250kb. You can easily reduce image sizing using online tools like this image compressor.
3. Image files are not created equally. PNG images should be used for images with transparent backgrounds. PNG files are almost always larger in file size than JPG images. Modern image formats include SVG and WebP, but we'll focus on JPG and PNG's for now.

Cropping Images into a square using CSS

The most common use of CSS on images is to crop them to fit within a parent HTML element. That's how we'll configure this code snippet.

Code Snippet - HTML

<div class="square-image-parent">
	<img src="https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" />
</div><!--image-parent-->

---

Code Snippet - CSS

/* STYLESHEET*/
div.square-image-parent {
	width:400px; /* width and height must be equal to crop into a square, but you can set the width and height to any dimensions you wish. */
	height:400px;
}
div.square-image-parent img {
	width:100%;
	height:inherit; /* this inherits the height of the parent element. So, if you want to change the height, simply update the parent element's height */
	object-fit:cover; /* this is where the magic happens. this CSS code crops the image into the parent element */
	object-position: center center; /* this is where the focus of the image will be. By default, this gets set to center center, but you can change this to change the focus of the image */
}

---

Result - A square image that is 400px by 400px

---

Cropping Images into a circle using CSS

The most common use of CSS on images is to crop them to fit within a parent HTML element. That's how we'll configure this code snippet.

Code Snippet - HTML

<div class="image-parent">
	<img src="https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" />
</div><!--image-parent-->

---

Code Snippet - CSS

/* STYLESHEET*/
div.image-parent {
	width:400px; /* width and height must be equal to crop into a square, but you can set the width and height to any dimensions you wish. */
	height:400px;
}
div.image-parent img {
	width:100%;
	height:inherit; /* this inherits the height of the parent element. So, if you want to change the height, simply update the parent element's height */
	object-fit:cover; /* this is where the magic happens. this CSS code crops the image into the parent element */
	object-position: center center; /* this is where the focus of the image will be. By default, this gets set to center center, but you can change this to change the focus of the image */
border-radius:50%; /* here is where the circle magic is */
}

---

Result - A circle image that is 400px by 400px

---