You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi,
When I use image fields and upload very wide aspect ratio images, they are zoomed too much on edit page load for fields that have width configured narrower than 100% of page edit form. The field uses gridMode=left.
Maybe the inputfield could detect, calculate current field width and adjust image initial zoom amount to fit the wider images within the fields current width? It should also take into account the respsonsive behaviour for smaller screens.
Examples of the issue - the right image fields are configured to be like columnWidth=30 of the width:
The text was updated successfully, but these errors were encountered:
donatasben
changed the title
Image field zooms small SVGs too large in admin - overflows field boundaries
Image field zooms horizontal images too large in admin - overflows field boundaries
Jan 16, 2025
@donatasben Is it just in the list mode where you get the issue? (where it displays just 1 image per line). Can you attach a copy of an image where you are observing the issue?
Hi,
When I use image fields and upload very wide aspect ratio images, they are zoomed too much on edit page load for fields that have width configured narrower than 100% of page edit form. The field uses
gridMode=left
.Maybe the inputfield could detect, calculate current field width and adjust image initial zoom amount to fit the wider images within the fields current width? It should also take into account the respsonsive behaviour for smaller screens.
Examples of the issue - the right image fields are configured to be like
![Image](https://private-user-images.githubusercontent.com/4421344/403860525-efeba877-bef9-4129-9939-33f141aa9201.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDE1NDgsIm5iZiI6MTczOTU0MTI0OCwicGF0aCI6Ii80NDIxMzQ0LzQwMzg2MDUyNS1lZmViYTg3Ny1iZWY5LTQxMjktOTkzOS0zM2YxNDFhYTkyMDEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTM1NDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGI2NDFkM2M5M2U1Nzk3ZTdkYmJmYWI5Mzk4YzdmNzZmZGRkZWU2YjcyZDI1NjI4OGNmMmY0ODhmM2U2NGMzZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Xy5FnLok1pCeL8mtQXGZFeKA7G91XjtYcyuOeiD0hAU)
![Image](https://private-user-images.githubusercontent.com/4421344/403859932-bae0e826-7c9a-4d62-95b3-3375edb0ed54.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDE1NDgsIm5iZiI6MTczOTU0MTI0OCwicGF0aCI6Ii80NDIxMzQ0LzQwMzg1OTkzMi1iYWUwZTgyNi03YzlhLTRkNjItOTViMy0zMzc1ZWRiMGVkNTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTM1NDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTljYmU4MzhlYzY5Y2M2MDEzNmExZjJiNzVmOTY0ZTQ5ZGIyODQxMzlmMTEyODU3MWE3NTAwMmJmNWRkOGNhZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.8Il-ug2BFnH1CDnBnZAEL0iqE-U4qWwF4uuO8EtnLjU)
columnWidth=30
of the width:The text was updated successfully, but these errors were encountered: