Image Sizing

Welcome to image sizing! The best way to demonstrate the ebb and flow of the various image possibilities, to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started. This one is 580x300:

580x300

The rest of this paragraph is filler for the sake of seeing the how a 150×150 image will flow.

150x150

The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. Again, letting the do it’s thang. Mission accomplished!

And now for something completely different: a massively large image.

1200wide

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And now we’re going to shift things to something in the middle. Just look at him there… Hey guy! Way to rock that 300x200 size. Not to big, not to small. I don’t care what the tiny image says, you look great. Don’t let anyone else tell you differently.

300x200

And that’s a wrap, yo! You survived the tumultuous waters of image sizes. Image styling achievement unlocked!

Author

Juan Perez is a web designer at Biron Themes. Expert in HTML5, CSS3 and Javascript. A fan of the Bootstrap framework and development tools such as Gulp.

Comments