min-width and min-height are set unexpectedly

[FabianEgartner]

Hello,
I am currently facing the issue that the min-width and min-height is set automatically when using remix-image, even though I did not specify any min-value in my code. Here my code that results in this issue:

(for the styling I am using Tailwind CSS)

image.tsx (created in /app/routes/api/image.tsx as suggested in the documentation: https://remix-image.mcfarl.in/docs/tutorial-basics/create-loader)

import type {LoaderFunction} from '@remix-run/node';
import type {Resolver} from 'remix-image/server';
import {imageLoader, fsResolver, fetchResolver} from 'remix-image/server';
import {sharpTransformer} from 'remix-image-sharp';

export const fetchImage: Resolver = async (asset, url, options, basePath) => {
  if (url.startsWith('/') && (url.length === 1 || url[1] !== '/')) {
    return fsResolver(asset, url, options, basePath);
  } else {
    return fetchResolver(asset, url, options, basePath);
  }
};

const vercelUrl = process.env.VERCEL_URL || '';
const fixedVercelUrl = vercelUrl.startsWith('https')
  ? vercelUrl
  : `https://${vercelUrl}`;

const config = {
  selfUrl:
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3000'
      : fixedVercelUrl,
  resolver: fetchImage,
  transformer: sharpTransformer,
  basePath: process.env.NODE_ENV === 'development' ? 'public' : '/',
};

export const loader: LoaderFunction = ({request}) => {
  return imageLoader(config, request);
};

The values for the Teaser-component that renders the remix-image:

 import Teaser from '~/components/Teaser';

const placeholderImage = '/assets/teaser_example.png';
const placeholderHeadlineText = 'Start now.';
const placeholderButtonLabel = 'Learn more';
const placeholderButtonLink = '#';

const RemixImage = () => (
  <>
    <Teaser
      src={placeholderImage}
      headlineText={placeholderHeadlineText}
      buttonLink={placeholderButtonLink}
      buttonLabel={placeholderButtonLabel}
    />
  </>
);

export default RemixImage;

The Teaser-component:

import classnames from 'classnames';
import Image from 'remix-image';

type Props = {
  src: string;
  headlineText: string;
  buttonLink: string;
  buttonLabel: string;
  className?: string;
  imageClassName?: string;
};

export default function Teaser({
  src,
  headlineText,
  buttonLink,
  buttonLabel,
  className,
  imageClassName,
}: Props) {
  return (
    <div className={classnames('relative', className)}>
      <Image
        key={src}
        src={src}
        loaderUrl='/api/image'
        className={classnames('w-full object-cover', imageClassName)}
        placeholder='blur'
        responsive={[
          {
            size: {
              width: 320,
              height: 300,
            },
            maxWidth: 768,
          },
          {
            size: {
              width: 1320,
              height: 570,
            },
          },
        ]}
      />

      <div className='absolute top-0 h-full w-full'>
        <div className='flex h-full w-full items-end md:items-center'>
          <div className='flex w-full flex-col gap-4 pl-5 pb-8 md:items-end md:gap-12 md:pr-32'>
            <div className='text-H3 text-white md:text-H1'>{headlineText}</div>
            <button className='w-fit rounded-[10px] border-2 py-2 px-6 text-center text-smaller_text font-semibold text-white md:mr-6 md:py-3 md:px-8'>
              <a href={buttonLink}>{buttonLabel} </a>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

When I start the application and open the developer tools of google-chrome, I can see that a min-width of 1320px and a min-height of 570px is set automatically. Why is this the case?

Furthermore, regarding the specified sizes of the responsive array of Image: With the first size-object, I want that width 320 and height 300 are applied as the ratio for the image, until the screen-width hits 768, Afterwards, I want that the second size-object with width 1320 and height: 570 are applied. Can I achieve this behaviour with my code? If not, how can I achieve this behaviour?

Thank you very much!