feat(ImageBase): remove position: absolute & update docs example (#7342…

…) (#7407)

* feat(ImageBase): remove position: absolute & add docs example with keepAspectRatio

* fix: remove useless internal variable

packages/vkui/src/components/Image/Readme.md

@@ -14,6 +14,30 @@ const Default = () => {
   );
 };
 
+const Responsive = () => {
+  const [size, setSize] = React.useState(100);
+  return (
+    <Group
+      header={
+        <Header mode="secondary">
+          Изображения без фиксированных размеров с сохранением пропорций
+        </Header>
+      }
+    >
+      <Flex margin="auto" direction="column" gap="m">
+        <Flex.Item flex="shrink">
+          <Button onClick={() => setSize((prev) => (prev >= 250 ? 100 : prev + 50))}>
+            Изменить размер
+          </Button>
+        </Flex.Item>
+        <div style={{ width: size }}>
+          <Image keepAspectRatio src={getAvatarUrl('app_zagadki', 200)} widthSize="100%" />
+        </div>
+      </Flex>
+    </Group>
+  );
+};
+
 /**
  * Какие значения принимают параметры смотрите в разделе "Свойства и методы".
  */
@@ -60,9 +84,8 @@ const Example = () => {
     <View activePanel="avatar">
       <Panel id="avatar">
         <PanelHeader>Image</PanelHeader>
-
         <Default />
-
+        <Responsive />
         <OthersFeatures />
       </Panel>
     </View>

packages/vkui/src/components/ImageBase/ImageBase.module.css

@@ -31,10 +31,6 @@
 }
 
 .ImageBase__img {
-  position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_img);
-  inset-block-start: 0;
-  inset-inline-start: 0;
   display: block;
   inline-size: 100%;
   block-size: 100%;

packages/vkui/src/styles/constants.css

@@ -72,7 +72,6 @@
   --vkui_internal--z_index_form_field_side: 6;
 
   /* z_index ImageBase isolate */
-  --vkui_internal--z_index_image_base_img: -1;
   --vkui_internal--z_index_image_base_overlay: 0;
   --vkui_internal--z_index_image_base_border: 1;
   --vkui_internal--z_index_image_base_badge: 2;