Josh Brown on Nostr: On Nos, we’re working on making horizontal images display in a certain aspect ...
On Nos, we’re working on making horizontal images display in a certain aspect ratio, like 4:3. We want the image to fill the space available and then be cropped as needed (assuming the original image isn’t 4:3). I couldn’t believe how hard this was to do in SwiftUI, so if you’re doing something like this, here’s what I found after too many hours of reading and experimenting:
https://stackoverflow.com/a/78903559/2030TLDR? Here’s an example:
```
Image("example")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(
minWidth: 0,
maxWidth: .infinity,
minHeight: 0,
maxHeight: .infinity
)
.aspectRatio(4 / 3, contentMode: .fit)
.clipShape(.rect)
```
Want to see it in the Nos codebase? That’s here:
https://github.com/planetary-social/nos/blob/main/Nos/Views/Components/Media/ImageButton.swift#L16Published at
2024-08-23 14:40:41Event JSON
{
"id": "e15eb9e444bea30c1ec5f9a537a3685db6d437efe222f73e8c146dbf720930ca",
"pubkey": "27cf2c68535ae1fc06510e827670053f5dcd39e6bd7e05f1ffb487ef2ac13549",
"created_at": 1724424041,
"kind": 1,
"tags": [],
"content": "On Nos, we’re working on making horizontal images display in a certain aspect ratio, like 4:3. We want the image to fill the space available and then be cropped as needed (assuming the original image isn’t 4:3). I couldn’t believe how hard this was to do in SwiftUI, so if you’re doing something like this, here’s what I found after too many hours of reading and experimenting: https://stackoverflow.com/a/78903559/2030\n\nTLDR? Here’s an example:\n\n```\nImage(\"example\")\n .resizable()\n .aspectRatio(contentMode: .fill)\n .frame(\n minWidth: 0,\n maxWidth: .infinity,\n minHeight: 0,\n maxHeight: .infinity\n )\n .aspectRatio(4 / 3, contentMode: .fit)\n .clipShape(.rect)\n```\n\nWant to see it in the Nos codebase? That’s here: https://github.com/planetary-social/nos/blob/main/Nos/Views/Components/Media/ImageButton.swift#L16",
"sig": "bcab78645aa38db281ca75cda62f0e35e1c0647a52d4790ed88121149df044fe5c2075dde457d4635f437119892d037fa92c6e3dd6167e54942181c27d25e22a"
}