强制图像保持 ::before 的尺寸与 padding-bottom aspect ratio hack答案

【问题标题】：Force image to maintain dimensions of ::before with padding-bottom aspect ratio hack强制图像保持 ::before 的尺寸与 padding-bottom aspect ratio hack
【发布时间】：2021-07-13 10:39:38
【问题描述】：

我正在使用 ::before 和 content: ''; padding-bottom: 100% 技巧来尝试对图像强制执行 1:1 的纵横比。我还添加了overflow: hidden。但是，正如您从屏幕截图中看到的那样，图像溢出了我在::before 中创建的正方形之外。我根本不希望图像拉伸，所以它们都应用了object-fit: contain。

我关注了various threads 和CSS Tricks article 的纵横比。

我怎样才能确保图像整齐地适合该正方形并且根本不会溢出？

编辑：Code sandbox

代码如下：

Item.tsx

<StyledItemWrapper
  className={item.animation}
  onClick={() => {
    clickItem(item);
  }}
>
  <picture>
    <img src={item.image} alt={item.title} />
  </picture>
  <StyledItemInfo>
    <p>{item.title}</p>
    <p>{item.description}</p>
    <p>${item.price.toFixed(2)}</p>
  </StyledItemInfo>
  <Button onClick={() => handleAddToCart(item)}>Add To Cart</Button>
</StyledItemWrapper>

Item.styles.ts

export const StyledItemWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  border: 1px solid lightblue;
  border-radius: 20px;
  &::before {
    display: block;
    overflow: hidden;
    padding-bottom: 100%;
    content: "";
  }
  picture {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50%;
    img {
      border-radius: 20px 20px 0 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  button {
    border-radius: 0 0 20px 20px;
  }
`;

export const StyledItemInfo = styled.div`
  font-family: Arial, Helvetica, sans-serif;
  padding: 1rem;
  height: 100%;
`;

【问题讨论】：

标签： html css reactjs styled-components aspect-ratio

【解决方案1】：

问题是我将样式应用于StyledItemWrapper，它包裹了整张卡片而不仅仅是图像，所以任何填充等都会影响整张卡片的布局。

仅当您将其应用于专用图像容器时，用于纵横比的填充和伪选择器技巧才有效。所以，这就是我所做的：

Item.tsx

const Item: React.FC<Props> = ({ item, handleAddToCart, clickItem }) => (
  <StyledItemWrapper
    className={item.animation}
    onClick={() => {
      clickItem(item);
    }}
  >
    <StyledVisualWrapper> // new styled component
      <picture>
        <img src={item.image} alt={item.title} />
      </picture>
    </StyledVisualWrapper>
    <StyledItemInfo>
      <p>{item.title}</p>
      <p>{item.description}</p>
      <p>${item.price.toFixed(2)}</p>
    </StyledItemInfo>
    <Button onClick={() => handleAddToCart(item)}>Add To Cart</Button>
  </StyledItemWrapper>
);

Item.styles.ts

export const StyledItemWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border: 1px solid lightblue;
  border-radius: 20px;

  button {
    border-radius: 0 0 20px 20px;
  }
`;

export const StyledVisualWrapper = styled.div`
  position: relative; // move from StyledItemWrapper to here
  max-height: 50%;
  &::before {
    display: block;
    overflow: hidden;
    padding-bottom: 100%;
    content: "";
  }
  picture {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    img {
      border-radius: 20px 20px 0 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
`;

【讨论】：