CSS 图像在百分比大小的容器中

Question

我有以下代码：

https://codepen.io/rctneil/pen/NWwGQyr?editors=1100

基本上我的问题围绕 .card-logo 元素。

我将在此位置放置各种徽标图像。我需要它们最大宽度为父卡的50%，最大高度为父卡宽度的50%。

这本身并不太难，但如果图像方面需要的话，我也需要它们低于那个。例如，如果是肖像图片，则高度应为卡片宽度的 50%，但徽标的宽度需要恰到好处。

有什么想法吗？

Answer 1

这是我的解决方案：https://codepen.io/Woralie/pen/dyZvzRP

您需要为每个徽标图像添加一个容器。

  .card-logo {
    position: absolute;
    display: block;
    max-width: 50%;
    max-height: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: white;
  }

  .card-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: -25%;
    margin-bottom: 0.75rem;
    padding: 25%;
    min-width: 100%;
  }

诀窍是用 padding: 25% 制作容器 position: relative，用 max-width: 50% 制作图像 position: absolute。容器的顶部和底部填充占总宽度的 2*25%，因此当其高度为 0 时，max-height: 100% 处的图像高度最多占容器总宽度的 50%。

CSS 图像在百分比大小的容器中

CSS image in percentage sized container

css

layout

image

aspect-ratio