Hey,
We’re building an app for local restaurants, we’ve added some code to make the lead images on the restaurants pages more portrait size than square, like they are on our Instagram.
The problem is the images are being cropped too much so you lose half the image. I want them to look like they are on our Instagram. Any ideas? Images below to give you an idea of what I mean and the code.
Code we added to make the images more portrait size:
Firstly, your code is using unstable class names, so it can break anytime, and using CSS is generally not recommended anymore in Apps, as Glide is transitioning to Pages, and there’s a chance you won’t be able to replicate your CSS in Pages.
For image sizing, please remember that the image component does crop your images based on what you chose for the “image height” design.
Hence, the best way to make sure your image is shown as much as possible compared to the original size, is to make sure your original image’s size fits with the design “height”.
Since you are currently in apps, you have a lot of control over your image without CSS if you place an image on your detail screen. You can select the shape, and then how that image is cropped inside that shape. If the image is part of a title component you don’t have this much granularity of control (I don’t think).
