Inlining images is useful for breaking up content and making an article more visually interesting, but when it comes to it, there’s more than one way to skin this cat.
In this article, I’ll outline three ways to do it.
Aligning with inline-block
The first way you can inline images is simply by setting display: inline-block on the image element and nesting the image tag in the p tag wherever you want it to render.
The problem with this solution is that the text doesn’t wrap around the image, which can break the flow of the content. It does have its uses, however, when you need to bring more emphasis to the image while still having it within the copy.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nisi sem, in venenatis magna sodales vel. Suspendisse quis sollicitudin erat, in aliquam enim. Nunc sit amet augue erat. Ut viverra eget neque a tempus. Praesent ut diam vitae justo posuere volutpat. Nullam est metus, porttitor mattis neque a, condimentum scelerisque eros. Sed semper ornare cursus. Morbi quis enim et sem ultrices semper non quis ante.
Morbi a viverra massa, id molestie tortor. Nullam feugiat dui nec sapien bibendum, a semper lectus aliquam. Sed in eros vitae purus efficitur semper. Quisque et pulvinar mi. In aliquam lectus quam, sed sagittis risus feugiat sed. Etiam et purus ac dui congue tincidunt. Nulla facilisi. Quisque non mauris eu massa pretium pellentesque. Praesent eget aliquam ligula. Sed fermentum orci at dui interdum, id congue felis dapibus.
Aligning with float
The second method for aligning images is using “float”. It’s very straight forward – simply add float: left; or float: right; .
The image below is wrapped with the text and has been floated to the left.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nisi sem, in venenatis magna sodales vel. Suspendisse quis sollicitudin erat, in aliquam enim. Nunc sit amet augue erat. Ut viverra eget neque a tempus. Praesent ut diam vitae justo posuere volutpat. Nullam est metus, porttitor mattis neque a, condimentum scelerisque eros. Sed semper ornare cursus. Morbi quis enim et sem ultrices semper non quis ante.
Morbi a viverra massa, id molestie tortor. Nullam feugiat dui nec sapien bibendum, a semper lectus aliquam. Sed in eros vitae purus efficitur semper. Quisque et pulvinar mi. In aliquam lectus quam, sed sagittis risus feugiat sed. Etiam et purus ac dui congue tincidunt. Nulla facilisi. Quisque non mauris eu massa pretium pellentesque. Praesent eget aliquam ligula. Sed fermentum orci at dui interdum, id congue felis dapibus.
This next image is wrapped with the text and has been floated to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nisi sem, in venenatis magna sodales vel. Suspendisse quis sollicitudin erat, in aliquam enim. Nunc sit amet augue erat. Ut viverra eget neque a tempus. Praesent ut diam vitae justo posuere volutpat. Nullam est metus, porttitor mattis neque a, condimentum scelerisque eros. Sed semper ornare cursus. Morbi quis enim et sem ultrices semper non quis ante.
Morbi a viverra massa, id molestie tortor. Nullam feugiat dui nec sapien bibendum, a semper lectus aliquam. Sed in eros vitae purus efficitur semper. Quisque et pulvinar mi. In aliquam lectus quam, sed sagittis risus feugiat sed. Etiam et purus ac dui congue tincidunt. Nulla facilisi. Quisque non mauris eu massa pretium pellentesque. Praesent eget aliquam ligula. Sed fermentum orci at dui interdum, id congue felis dapibus.
Aligning with CSS Shapes
The third method, which is slightly more complicated, is using CSS shape-outside. While this method offers a somewhat nice result, it’s still not fully supported across browsers. To use this method, wrap the img tag (I prefer to use a span).
On the wrapper, set the height and width you desire, making sure the wrapper size is bigger than the image, and also the float, and finally set the shape-outside using details which can be found here. The code is used for the following example is:
.image-shape-wrapper {
height: 270px;
width: 320px;
background:transparent;
float:left;
shape-outside: inset(10px 10px 10px 10px);
}
.image-shape-wrapper-circle {
height: 220px;
width: 320px;
float:left;
shape-outside: ellipse();
}
img {
display: inline-block;
margin: 20px;
}
Shape-outside inset and float left;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nisi sem, in venenatis magna sodales vel. Suspendisse quis sollicitudin erat, in aliquam enim. Nunc sit amet augue erat. Ut viverra eget neque a tempus. Praesent ut diam vitae justo posuere volutpat. Nullam est metus, porttitor mattis neque a, condimentum scelerisque eros. Sed semper ornare cursus. Morbi quis enim et sem ultrices semper non quis ante.
Morbi a viverra massa, id molestie tortor. Nullam feugiat dui nec sapien bibendum, a semper lectus aliquam. Sed in eros vitae purus efficitur semper. Quisque et pulvinar mi. In aliquam lectus quam, sed sagittis risus feugiat sed. Etiam et purus ac dui congue tincidunt. Nulla facilisi. Quisque non mauris eu massa pretium pellentesque. Praesent eget aliquam ligula. Sed fermentum orci at dui interdum, id congue felis dapibus.
Shape-outside ellipse and float left;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nisi sem, in venenatis magna sodales vel. Suspendisse quis sollicitudin erat, in aliquam enim. Nunc sit amet augue erat. Ut viverra eget neque a tempus. Praesent ut diam vitae justo posuere volutpat. Nullam est metus, porttitor mattis neque a, condimentum scelerisque eros. Sed semper ornare cursus. Morbi quis enim et sem ultrices semper non quis ante.
Morbi a viverra massa, id molestie tortor. Nullam feugiat dui nec sapien bibendum, a semper lectus aliquam. Sed in eros vitae purus efficitur semper. Quisque et pulvinar mi. In aliquam lectus quam, sed sagittis risus feugiat sed. Etiam et purus ac dui congue tincidunt. Nulla facilisi. Quisque non mauris eu massa pretium pellentesque. Praesent eget aliquam ligula. Sed fermentum orci at dui interdum, id congue felis dapibus.
So now you’ve mastered inlining images, why not learn how to measure and reduce your page load speed?
Leave a Reply