Hello,
I am having a problem with displaying photos.
I have a image sized 270x135 and i let users upload various sized pictures.
I would like to crop the picture so it would fit into the image object.
I hoped imagix would get it but i get this result.
The crop with imgix will crop the image to fit the image element dimensions, so you get varied results. It is not possible to take any ratio image uploaded by a user and get it displayed exactly as the original image is inside of an image element of a different ratio.
If having images display properly is of absolute importance, than you would need to utilize some kind of image cropper to allow your users to have full control over the crop. Alternatively, you could put some details of what image ratios work as ‘helper text’ and allow your users to upload a cropped image fitting your ‘helper text’ instructions.
Once you do that, you can have your image element sized as you want…and for responsiveness use the ‘keep element proportions’ box checked so the image element will maintain its proportions as the page is resized.
I don’t mind it being cut out of the box, i just want it to fill the whole object even if its not perfectly matched and cropped.
How can i achieve that with simplicity?
Using css to the img element, you can add a class or an ID “myimg” for this image and add in a html element for this class or Id :
#myimg {
object-fit: cover;
}
Tried adding it, it did nothing 
Any thing else?
#myimg {
object-fit: cover;
width: 100%;
height: 100%;
margin: 0;
}
Add !important to the last 3 if needed.
This topic was automatically closed after 70 days. New replies are no longer allowed.
