Wide images stretched in thumbnails

  • Resolved carbybarby838

    (@carbybarby838)


    6 years, 2 months ago

    Hello there,

    I’m running Hamilton on a test website and the thumbnails of two of the posts, “Lost In Your Eyes” and “Water Fountain,” are stretched, cropped, and blurry. The images appear normally on their single post pages, they’re only stretched on the home page.

    Those images are proportionally the widest on the site, with the dimensions of both being 1920x1080px. The largest image is the Marchington image, which is 3000x3000px, but that thumbnail appears normally on the home page.

    Site password is “greenpotatoes”.

    Thank you

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter carbybarby838

    (@carbybarby838)

    Correction, the affected images aren’t 1920x1080px, but they are in 16:9 ratio.

    Thread Starter carbybarby838

    (@carbybarby838)

    Nevermind, I fixed it by adding this code to “additional CSS” in the Customizer (please keep in mind I’m not a developer, I don’t know if this would work for all others)

    .preview-image {
	background-size: 100%;
	
}
.post-preview.fallback-image .preview-image:before {
	padding-bottom: 50%;
	width: 100%;
}
.post-preview.fallback-image .preview-image:after {
	padding-bottom: 50%;
	width: 100%;
}
    Thread Starter carbybarby838

    (@carbybarby838)

    Correction, had to change it to this

    .preview-image {
	background-size: 100%;	
}
.post-preview.fallback-image .preview-image:before {
	padding-bottom: 56%;
	width: 100%;
}
.post-preview.fallback-image .preview-image:after {
	padding-bottom: 50%;
	width: 100%;
}
    Thread Starter carbybarby838

    (@carbybarby838)

    Follow up: The above code works for images that are 16×9, but wide images outside of those proportions are still cut off at the top/bottom (though they do not appear to be stretched).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Wide images stretched in thumbnails’ is closed to new replies.