It is prettier to have the image to bleed outside the parent container in certain situations especially when the body content is quite narrow, like this blog. Few days ago I tried doing that by creating a new CSS file and linking it to the header (partials/head.html), that did not work.

This time I went to the theme’s main CSS and tried my luck there. It worked!

/* bleed .img inside #post-body, by @aixnr based on TryGhost/Casper */
#post-body img {
	display: block;
	max-width: 150%;
	height: auto;
	padding: 0.6em 0;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%); /* for Safari and iOS */
	-ms-transform: translateX(-50%); /* for IE9 */
	transform: translateX(-50%);
}

/* for media below @500px, by @aixnr based on TryGhost/Casper */
@media only screen and (max-width: 500px) {
	#post-body img{
		padding: 0;
		width: calc(100% + 32px);
		 min-width: 0;
		 max-width: 112%;
	}
}

This CSS code is adapted from Ghost’s default theme, Casper. At first I did not implement media query, then I found out that the bleed happened on phone. I put the media query for screen at @500px and below and then the bleed did not happen anymore.

I am a happy kid!

p.s.: I don’t know CSS. I try my luck every time by doing things differently.