Search
K
Hire us
AspectRatio
AspectRatio controls the size of the undefined dimension of a node or child component. You can refer for more details.
Import
`Copyimport { AspectRatio } from "native-base";`
Example
```Playgroundconst Example = () => {
return <AspectRatio ratio={{
base: 3 / 4,
md: 9 / 10
}} height={{
base: 200,
md: 400
}}>
<Image resizeMode="cover" source={{
uri: "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}} alt="Picture of a Flower" />
</AspectRatio>;
};const Example = () => {  return <AspectRatio ratio={{    base: 3 / 4,    md: 9 / 10  }} height={{    base: 200,    md: 400  }}>      <Image resizeMode="cover" source={{      uri: "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"    }} alt="Picture of a Flower" />    </AspectRatio>;};
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}

/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}

.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
```
Props
ratio
The aspect ratio of the container. Some examples are `16/9`, `16/10`, `9/16`, `4/3`
Type: ResponsiveValue<number>
Default: 4/3
Quick Nav