you can achieve the desired height and width of the images here, if u want to have the original hight & width just put them here<Image src="idkbalalabla.png" height="" width="" alt="balabla" />

Please I like to share my code snnipet with you

import NextImage, { ImageProps } from "next/image";
import { getPosition, getSizes, loader, typeToObjectFitMap } from "./utils";
import type { CustomImageProps } from "@bmi-digital/components/media";
import type { Props } from "./types";
import React from "react";

const createContentfulImageProps = ({
image,
size,
position,
focalPoint,
isMobile,
type,
altText,
widths,
loading = "lazy",
className,
"data-testid": dataTestId
}: Props): CustomImageProps => {
const { url } = image;

const formattedUrl = url.startsWith("https:") ? url : https:${url};

const sizes = getSizes(widths);
const objectFit = size typeToObjectFitMap[type "Decorative"];
const objectPosition = getPosition({
size,
position,
focalPoint,
isMobile
});

const MyImageComponent = (props: ImageProps) => {
return React.createElement(
"div",
{
style: {
position: "relative",
width: "100%",
height: "100%",
border: "2px solid red"
}
},
React.createElement(NextImage, {
...props,
loader: props.loader,
src: props.src,
alt: props.alt,
draggable: props.draggable,
sizes: props.sizes,
loading: props.loading
})
);
};

return {
component: NextImage,
loader,
src: formattedUrl,
alt: altText,
draggable: false,
style: {
objectFit,
objectPosition,
widtth: "100%",
height: "100%"
},
className,
decoding: "async",
fill: true,
loading,
sizes,
"data-testid": dataTestId
};
};

export default createContentfulImageProps;

sure

I just want to give the height of NextImage to its parent div which I am failling to get

why aren't u using jsx

Basically its a .ts file

Why not tsx?

can u try changing the 100% from width and hight into the original image dimensions

Just working on a project and from earlier it is been written in ts

for exemple like this

tried that to but have images which arre coming dynamically

just try it to see if it works with 1 image staticly ( put its original dimensions see if it goes well)

actually the image is coming dynamically which is defined in another named component library so its hard to fetch the values for every single image as the image component is reusable

oh add fill = { true}

To make an Image take full height and width of parent add a div wrapper with position relative along with fill = { true} or in next Image

Yeah done the but the height is almost 430px and I have to applied it to the parent div yet this height is dynmaic, still not getting the hieght of outer div