CSS图片定位问题：移除Logo容器上下空白并保留原有定位

核心思路 #

要消除Logo容器的上下空白同时保留目标位置，关键是让Logo容器脱离文档流，不占用卡片的垂直空间，再通过定位精确控制位置，同时适配未知尺寸的Logo：

• 用绝对定位让Logo容器不占据布局空间，直接消除空白
• 通过定位变换让Logo垂直居中于照片底部边缘
• 借助flex布局和最大尺寸限制，适配任意宽高比的Logo

修改后的代码 #

CSS

* {
  box-sizing: border-box;
}

p {
  margin: 0;
}

html {
  height: 100%;
  display: grid;
  place-items: center;
}

.card {
  position: relative;
  width: 200px;
  border: 2px solid black;
}

.photo {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  pointer-events: none;
  outline: 2px dotted red; /* 可删除，仅用于查看容器范围 */
  transform: translateY(50%); /* 让容器中心点对齐照片底部 */
}

.logo img {
  display: block;
  max-width: 50%;
  max-height: 75%;
  padding: 0.2rem;
  border-radius: 0.25rem;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .25);
  background-color: #fff;
  pointer-events: all;
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}

HTML（无需修改）

<div class="card">
  <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
  <div class="logo">
    <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
  </div>
  <div class="meta">
    <p>Name here</p>
    <p>Sub title here</p>
  </div>
</div>

关键修改说明 #

1. 绝对定位脱离文档流：把.logo的position设为absolute，并设置bottom:0、left:0、right:0，让容器紧贴卡片底部，完全不占用.meta区域的垂直空间，直接消除了原有的上下空白。
2. transform实现垂直居中：transform: translateY(50%)会将容器向上移动自身高度的一半，这样容器的中心点刚好对齐照片的底部边缘，完美满足Logo垂直居中于照片底部的需求。
3. 清除多余内边距：移除原有的padding:25%和min-width:100%，避免容器产生不必要的高度，同时保留flex布局保证Logo在容器内水平垂直居中。
4. 适配未知Logo尺寸：保留img的max-width:50%和max-height:75%属性，不管Logo是宽幅还是竖幅，都会自动缩放至合适大小，不会超出容器范围。

内容的提问来源于stack exchange，提问作者rctneil