Crop images; activate "object-fit:cover" function

Hi,

is there a possibility to activate the "object-fit: cover" function in the rich Text Editor of Canvas?
I tried to crop an image there. In the preview it worked, but when saving/publishing, the image was again only rescaled and the "object-fit" flag in the style disappeared.

See my example below. Please insert an image of choice.

the preview can be seen in the "cropped_image.png"

when saving (Updatera Kursöversikt) the object-fit flag disappears and the image is only scaled. (scaled_image_after_saving.png)

Best
Andreas

cropped_image.png

Find more posts tagged with

Accepted answers

All comments

BookerE1

@AndreasKrause DogNeedsBest wrote:
Hi,
is there a possibility to activate the "object-fit: cover" function in the rich Text Editor of Canvas?
I tried to crop an image there. In the preview it worked, but when saving/publishing, the image was again only rescaled and the "object-fit" flag in the style disappeared.
See my example below. Please insert an image of choice.
the preview can be seen in the "cropped_image.png"
when saving (Updatera Kursöversikt) the object-fit flag disappears and the image is only scaled. (scaled_image_after_saving.png)
Best
Andreas

Hello,

The “object-fit: cover” function is not supported by the rich text editor of Canvas. This means that the style attribute will be removed when you save or publish your page, and the image will be rescaled to fit the container. This is a known issue that has been reported by other users.

There are some possible workarounds that you can try to crop your image and keep the aspect ratio:

You can use an external tool, such as FreeCAD, Open3D, Artec Studio, or Python, to export or convert your image file to a different format, such as PLY, that can preserve the object-fit property.
You can use the HTML editor in Canvas to manually add the style attribute to your image tag after you save or publish your page. However, this is not a permanent solution, as the style attribute will be removed again if you edit your page using the rich text editor.
You can use a different image editor, such as Photoshop or GIMP, to crop your image before uploading it to Canvas. This way, you can adjust the size and aspect ratio of your image to match your desired dimensions.

I hope this helps you solve your problem.

If you have any further questions.

Please feel free to ask. Have a nice day!

Best Regard,
BookerE1

Unanswered Questions

Classic Quiz Fill in the Blank: Not all possible correct answers are being graded against
Hi all, I'm looking to see if this has happened for anyone else. A student completed a Classic Quiz and one question was counted wrong that should not have been. In the quiz settings, the instructor entered 9 possible answers for this question. The student entered one of these answers. However, that particular question was…
Partial Credit in Alternative Format Questions
Looking for the addition of partial credit for alternative format questions in Canvas, like ordering and category/matrix. We can only do it in close drop down, matching, and multiple response.
Course Analytics not currently reporting all data ?
Has anyone found gaps in their course analytics ? I'm currently seeing missing last view date, last participation date, and participations at overall course level, even though the same data is present at individual week and student level. Am also seeing truncated asset counts ie we are seeing only the global header counts,…
Allow Observers to View Instructor Comments
It would be very beneficial for observers (parents) if they could view instructor comments. If they had access to this information, they could better understand the grading of individual assignments and better understand the errors that their student made.
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…