Desperate help need with image issues

[twbarton]

I am creating a book review site built on ghost (I know not wordpress, hope I can still get some help) I’m using a theme I purchased. The problem I’m having is that not all the images are the same size, pulled from amazon, so I have been resizing each one to the same size. The images are vertical rectangles instead of horizontally rectangular which is part of the issue as the template expects the latter.

I have been playing with the css but the issue is that on the main page on the desktop and mobile the images are being stretched and clipped.

Any help would be appreciated.

http://twbarton.com
The site is private. the password is ciruma794

[twbarton]

I’m open to any design thoughts as well if anyone thinks there is a better way to accomplish my goal.

Ty

[Beverleyh]

You’re more likely to receive help if you provide a reduced demo of the problem for us to look at/tinker with in CodePen.

We don’t need to see your whole codebase. Just enough HTML and CSS to illustrate the problem with the image.

[webinuse]

Yeah, Beverleyh is right. I can not help you if I have to try to find your problem in your code.

[twbarton]

Of course, you’re correct. I’ll try to boil it down this evening and get a link posted.

Ty

[twbarton]

Finally got a codepen setup.

https://codepen.io/1eyety/pen/brmmLR

Thanks,
Ty

[Beverleyh]

Sorry – most folks haven’t got the free time to filter through a 800+ line CSS file.

We just need the bare basics of HTML and CSS to illustrate the actual problem. If you can go through the process of cutting it all back to a dozen or so lines, that will make things much easier and less overwhelming for potential helpers.

That said, try background-size: cover; on the div holding the image.

[twbarton]

Thanks, Beverleyh, I cut down the css. It was originally set as cover and that had a worse effect.

Ty

[twbarton]

I also removed my changes so it looks like the original code minus the sidebar.

Ty

[Beverleyh]

background-size: cover; or background-size: contain; would the logical choices here.

[twbarton]

Thank you for your reply. It is already set to cover and I have tried contain but both cause the image to be cropped which is the whole issue. I’m trying to find a way to present the book covers without cropping or distorting them.

Ty

[Beverleyh]

You are mistaken. ‘contain’ doesn’t crop or distort the image; It will fit the height of the image down into the available space and leave a gap at each side (with ‘no-repeat’ in place).

[masonwongcs]

All you need is adjusting the background-size and background-position attribute. Just overwrite the class with this:

div.featured-media{
  width: 100%;
  background-size: 60% auto; //Adjust percentage based on your requirement
  background-position: center;
}

[Author]

Posts