Is there a way to fix an image getting cropped at the top?

I’m having trouble with an image getting cut off in some screen sizes, but it’s fine in others. I just want to be able to specify that the top of the image should not be cropped, and maybe take from the bottom instead?

Any help would be greatly appreciated!

Hello, welcome to the forums!

Please can you send us a link to your site, or post the code that your using? We’ll need to see that to help with this issue.

Looking forward to assisting you with this :heart:

1 Like

Hi! My website is meant to be an internal intranet website for a company that I’m working at, so I don’t have any actual link for it

Apart from speculation and guessing, I’m afraid that nobody will be able to help you without seeing your code!

If you have an extended license you can temporarily publish your site to the website service.

I completely forgot about the temporary website publishing option!

Here’s the link:

Your image is not technically being cropped. Since you have the image set to object-fit: cover; the image is set to take up the width of the element it is inside of. You would be best to upload and use an image formatted to the right size.

I notice for your site you are using a lot of inline styles, if you are new to Bootstrap Studio I would recommend checking out this short YouTube video that goes over some of the basics, its definitely worth it! Creating a Website with Bootstrap Studio (Tutorial) - YouTube


Applying object-position: right top; to the image also does the trick, but bare in mind that users to this page will have to download the whole image, even though only part of it is not shown, hence why cropping your image to size and then uploading it would be the best method.

I hope this is useful though, feel free to reach out again if you need a hand! Hope you enjoy Bootstrap Studio!

1 Like

Oh perfect! That was the line of code I was looking for. Thank you so much for your help!