如何通过他的背景图像高度设置为元素

Question

嗨，我的应用程序中有这个组件，现在这个butonbase的高度是硬编码的。 我从后端获得图像，并将该图像设置为ImageImagine组件的背景图像。 我需要将那个Butonbase的高度放到蜜蜂dinamic上，以便ImageImagine中的背景图像可以观察到原始纵横比。

import React, { useState } from 'react';
import {
  Box,
  ButtonBase as MuiButtonBase,
  IconButton,
  Typography,
  styled,
} from '@mui/material';

import Label from './Label';
import Favorite from './Favorite';
import MintingContextButton from './MintingContextButton';

import StatusLabel from 'src/components/StatusLabel';
import PublicLabel from 'src/components/PublicLabel';

import { IMAGINE_STATUS } from 'src/constants';
import { authDomain } from 'src/config';

const ButtonBase = styled(MuiButtonBase)(({ theme }) => ({
  position: 'relative',
  height: 342,
  width: '100%',
  borderRadius: 32,
  [theme.breakpoints.down('xs')]: {
    width: '100% !important', // Overrides inline-style
    height: 326,
  },
  '&:hover': {
    '& .imageTitle': {
      opacity: 1,
      transition: theme.transitions.create('opacity'),
      zIndex: 1,
    },
    '& .imageBackdrop': {
      opacity: 0.7,
    },
    '& .MuiIconButton-favorite': {
      opacity: 1,
      transition: theme.transitions.create('opacity'),
      zIndex: 12,
    },
    '& .MuiButton-minting': {
      opacity: 1,
      transition: theme.transitions.create('opacity'),
      zIndex: 12,
    },
  },
}));

const ContextContainer = styled('span')(() => ({
  position: 'absolute',
  width: '100%', // should on if real mint button
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  padding: 16,
  zIndex: 1, // Remove if real mint button
}));

const StyledStatusLabel = styled(StatusLabel)(() => ({
  position: 'absolute',
  left: 16,
  top: 16,
  zIndex: 1,
}));

const MintIconButton = styled(IconButton)(() => ({
  position: 'absolute',
  left: 16,
  top: 16,
  zIndex: 1,
  background: 'rgba(0, 0, 0, 0.7)',
  '&:hover': {
    background: 'rgba(128, 58, 254, 0.9)',
  },
}));

const ImageTitle = styled('span')(({ theme }) => ({
  opacity: 0,
  textAlign: 'left',
  // [theme.breakpoints.down('sm')]: {
  //   opacity: 1,
  //   zIndex: 1
  // },
}));

const ImageBackdrop = styled('span')(({ theme }) => ({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  backgroundColor: theme.palette.common.black,
  opacity: 0,
  transition: theme.transitions.create('opacity'),
  borderRadius: 32,
  // [theme.breakpoints.down('sm')]: {
  //   opacity: 0.7,
  // },
}));

const ImageImagine = styled('span')(() => ({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  backgroundSize: 'cover',
  backgroundPosition: 'center 40%',
  borderRadius: 32,
}));

const GalleryItem = ({
  imagine,
  imagine: {
    id,
    title,
    status,
    isMyFavorite,
    public: publicStatus,
    context: imgContext,
    thumb_url: imgUrl,
    count_favorites: countFavorites,
  },
  onOpen,
  onClose,
  ...props
}) => {
  const [isHoverFavorite, setHoverFavorite] = useState(false);

  return (
    <>
      <ButtonBase
        className="MuiButtonBase-gallery"
        disableRipple
        focusRipple
        onClick={(event) => onOpen(event, id)}
      >
        <ContextContainer>
          <Box display="flex" justifyContent="space-between">
            <Box
              display="flex"
              visibility={status === IMAGINE_STATUS.COMPLETE && 'hidden'}
            >
              <StyledStatusLabel status={status} />
            </Box>
            {status === IMAGINE_STATUS.COMPLETE && (
              <React.Fragment>
                <Favorite
                  imagineId={id}
                  isMyFavorite={isMyFavorite}
                  isHoverFavorite={isHoverFavorite}
                  isHidden
                  onHoverFavorite={setHoverFavorite}
                  count={countFavorites}
                />
                {/* <MintingContextButton imagine={imagine} /> */}
              </React.Fragment>
            )}
          </Box>
          <ImageTitle className="imageTitle">
            <Typography color="textPrimary" variant="subtitle1" noWrap>
              {title}
            </Typography>
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
            >
              {imgContext && <Label>{imgContext}</Label>}
              <PublicLabel publicStatus={publicStatus} />
            </Box>
          </ImageTitle>
        </ContextContainer>
        <ImageImagine
          style={{
            backgroundImage: `url(${
              imgUrl ?? `${authDomain}/images/glitchcat.gif`
            })`,
          }}
        />
        <ImageBackdrop className="imageBackdrop" />
      </ButtonBase>
    </>
  );
};

export default GalleryItem;

Answer 1

您是否试图将 设置为 buttonbase 高度：auto和 min-height 最小值：fit-content？