Fix Image component default height

Juan Pablo Prieto [2023-06-30 02:52PM UTC]
I think something is up with our Image comp. Did we figure out if it was the height? Screenshot 2023-06-30 at 7.49.37 AM.png

:thread: Slack Thread

[Slack Thread](https://shopify.slack.com/archives/C02A5S8LNP9/p1688136721342099?thread_ts=1688136721.342099&cid=C02A5S8LNP9)
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:52PM UTC] I think something is up with our Image comp. Did we figure out if it was the height? [Screenshot 2023-06-30 at 7.49.37 AM.png](https://files.slack.com/files-pri/T017D49VC3F-F05FRPX8ZDE/screenshot_2023-06-30_at_7.49.37_am.png)
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:52PM UTC] untouched code from demo-store's journal listing route ``` ```
[Bret Little](https://github.com/blittle) [2023-06-30 02:52PM UTC] Is tailwind installed?
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:52PM UTC] no this is the skeleton
[Bret Little](https://github.com/blittle) [2023-06-30 02:53PM UTC] `className="object-cover w-full"`
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:53PM UTC] mmmm it just feels odd to have to add any classes for it to respect the aspect-ratio
[Bret Little](https://github.com/blittle) [2023-06-30 02:54PM UTC] yeah, I had issues with this too the other day, I was trying to do the tutorial in the docs. But I started with the hello world template and didn't add tailwind. All the markup the guide tells you to add include tailwind classes.
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:54PM UTC] height: 100% fixes it
[Bret Little](https://github.com/blittle) [2023-06-30 02:54PM UTC] I agree though. I think the image component should work well without CSS
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:55PM UTC] this works.. ``` ```
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:55PM UTC] I think if `aspectRatio` is passed we should inline the height
[Bret Little](https://github.com/blittle) [2023-06-30 02:56PM UTC] yeah, I was really confused what aspect ratio was really doing for me.
Spy [2023-06-30 02:57PM UTC] Could not find a command for `github issue create repo=hydrogen "Add 100% height to Image if aspectRatio is passed"` :(
Spy [2023-06-30 02:57PM UTC] Did you mean.... • [github issues create](https://spy-v2.docs.shopify.io/commands/github.html#github-issues-create---route): Create a GitHub issue description with the message… • [github add](https://spy-v2.docs.shopify.io/commands/github.html#github-add---route): Add a GitHub team to the specified Repository with… • [github issues](https://spy-v2.docs.shopify.io/commands/github.html#github-issues---route): Commands related to GitHub issues • [github issues create_comment](https://spy-v2.docs.shopify.io/commands/github.html#github-issues-create_comment---route): Create and add a comment to an existing GitHub… • [github user](https://spy-v2.docs.shopify.io/commands/github.html#github-user---route): Get the github handle for a slack user
[Bret Little](https://github.com/blittle) [2023-06-30 02:57PM UTC] :facepalm: spy
[Bret Little](https://github.com/blittle) [2023-06-30 02:57PM UTC] I can neeever get spy commands right
[Juan Pablo Prieto](https://github.com/juanpprieto) [2023-06-30 02:57PM UTC] can never remember these command :disappointed: we need SpyGPT
Spy [2023-06-30 02:58PM UTC] :oops: Something went wrong, let me talk to the user for a moment... (error: Fix did not match any of the parameters for this command: repo: SpyCommon::Parameters::GitRepository title: SpyCommon::Parameters::String labels: SpyCommon::Parameters::String)

^{Created originally at 2023-06-30 03:00PM UTC by Juan Pablo Prieto}

Shopify / hydrogen

Fix Image component default height #1062