Scaling images for responsive designs

Internet

I've had a semblance of a responsive design on my sites for a while, but scaling images continued to elude me. I've always defined the height and width of images, meaning previous attempts at inline scaling resulted in some warped and stretched images.

With some help from Clara, I discovered Rubenerd specifically needed the following lines (your mileage may vary):

#content img {
  height:auto !important;
  max-height:auto !important;
  max-width:100%;
}

Now images, such as this Railgun image by Dream C Club, will preserve their aspect ratio while scaling up and down. Whether it will improve karaoke abilities is another question.

Author bio and support

Me!

Ruben Schade is a technical writer and IaaS engineer in Sydney, Australia who refers to himself in the third person in bios. Wait, not BIOS… my brain should be EFI by now.

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or buy some silly merch. Thanks!