{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/858","labels_url":"https://api.github.com/repos/facebook/react-native/issues/858/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/858/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/858/events","html_url":"https://github.com/facebook/react-native/issues/858","id":68598675,"number":858,"title":"[Image] Maintaining Aspect Ratio of <Image>","user":{"login":"paramaggarwal","id":543981,"avatar_url":"https://avatars.githubusercontent.com/u/543981?v=3","gravatar_id":"","url":"https://api.github.com/users/paramaggarwal","html_url":"https://github.com/paramaggarwal","followers_url":"https://api.github.com/users/paramaggarwal/followers","following_url":"https://api.github.com/users/paramaggarwal/following{/other_user}","gists_url":"https://api.github.com/users/paramaggarwal/gists{/gist_id}","starred_url":"https://api.github.com/users/paramaggarwal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paramaggarwal/subscriptions","organizations_url":"https://api.github.com/users/paramaggarwal/orgs","repos_url":"https://api.github.com/users/paramaggarwal/repos","events_url":"https://api.github.com/users/paramaggarwal/events{/privacy}","received_events_url":"https://api.github.com/users/paramaggarwal/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-04-15T07:19:33Z","updated_at":"2015-06-02T01:20:29Z","closed_at":null,"body":"Starting this discussion thread around how to maintain aspect ratio of an image like it does in a browser. When we use `<img src='example.com/image.jpg'>` in a browser, it renders a 0x0 block, then it fetches the image, looks at its width and height, then updates the layout with this new width/height bound by width/height set on container. So if the image is 400x300. It effectively gets a style of `width: 400` and `height: 300`. But if we configure styling to be `width: 500`, then it fills in the other dimension `height: 300` and is able to display the image.\r\n\r\nNow in React Native, this behaviour does not exist for the right reasons. But we also lose this ability to somehow convey the size of the image. In React Native we are limited to giving width and height as part of the `style`. But in scenarios where the width actually comes from the Flexbox behaviour - with something like `alignSelf: stretch`, the height needs to be configured absolutely. So it ends up with the width taking the entire width from parent, but height being fixed. Using `cover` on the image, we are able to fill this space with the image, but the image gets cropped.\r\n\r\n@vjeux mentioned in #494 that he prototyped an implementation where you would pass in something like an `aspectRatio` for the image, and then React Native would maintain that within the bounds of the configured styling - but he backed off because it is not part of the CSS standard. I have a suggestion on how we can do this (we use this method in our internal screen layout system that also uses css-layout).\r\n\r\nIn React Native, an image is configured like this: `<Image source={{uri: \"example.com/image.jpeg\"}} />`, what we are missing here is information about the size of the image. What if we gave that info here in `source`, and not as part of CSS `style` info? So it would look something like this:\r\n\r\n```\r\n<Image source={{\r\n    uri: \"example.com/image.jpeg\",\r\n    height: 400,\r\n    width: 300\r\n  }} style={{\r\n    alignSelf: 'stretch'\r\n  }} />\r\n```\r\n\r\nIn this example, the width of the Image would come from the parent, and it would pick the height based on the ratio inferred from the meta info in `source`. The logic to this would remain the same as what @vjeux prototyped, but now we have a way to configure it outside CSS as there is nothing of this sort in the CSS spec itself. The `source` spec is a React Native spec, and hence we can support two new properties `width` and `height` inside it to not have to fetch an image, but instead know the height and width of the image beforehand.\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/107765307","html_url":"https://github.com/facebook/react-native/issues/858#issuecomment-107765307","issue_url":"https://api.github.com/repos/facebook/react-native/issues/858","id":107765307,"user":{"login":"brentvatne","id":90494,"avatar_url":"https://avatars.githubusercontent.com/u/90494?v=3","gravatar_id":"","url":"https://api.github.com/users/brentvatne","html_url":"https://github.com/brentvatne","followers_url":"https://api.github.com/users/brentvatne/followers","following_url":"https://api.github.com/users/brentvatne/following{/other_user}","gists_url":"https://api.github.com/users/brentvatne/gists{/gist_id}","starred_url":"https://api.github.com/users/brentvatne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brentvatne/subscriptions","organizations_url":"https://api.github.com/users/brentvatne/orgs","repos_url":"https://api.github.com/users/brentvatne/repos","events_url":"https://api.github.com/users/brentvatne/events{/privacy}","received_events_url":"https://api.github.com/users/brentvatne/received_events","type":"User","site_admin":false},"created_at":"2015-06-02T01:20:29Z","updated_at":"2015-06-02T01:20:29Z","body":"@paramaggarwal - yeah, depending on your use case that might not be ideal but this seems pretty easy to implement so it's worth a shot :smile:\r\n\r\nPlease post code here afterwards! I'm curious to see"}}