我在這里創建了一個問題的小模型:https://codepen.io/rctneil/pen/PoBgZEe?編輯=1100

我希望實現的是有效地消除紅色虛線輪廓內徽標上下的空間。

我想讓logo保持在原來的位置(水平居中，垂直居中在照片的底邊)，但是去掉上下的空間。這將降低卡的整體高度。

我不知道的尺寸和長寬比的標志提前。

有什么想法嗎？

* {
  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: relative;
  margin-top: -25%;
  padding: 25%;
  min-width: 100%;
  pointer-events: none;
  outline: 2px dotted red;
}

.logo img {
    position: absolute;
    display: block;
    max-width: 50%;
    max-height: 75%;
    margin-top: 0;
    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;
}

<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>

在花費了我不愿承認的時間之后，這個答案的第一條評論把我引向了我認為唯一能解決你的問題的純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: relative;
    min-width: 100%;
    pointer-events: none;
    outline: 2px dotted red;
    /* This will slide the element up by 50% of it's total height */
    transform: translateY(-50%);
}
  
 .logo img {
    display: block;
    max-width: 50%;
    margin-top: 0;
    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;
}

<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>

我采用這種方法，我設置了一個長寬比:3/2；對紅色輪廓中的圖像和對象-適合:包含；填充容器內部的標志。確保它尊重50%的寬度。

我在演示中放了第二張卡，上面有一個更高的圖像，可以看到不同大小的徽標的效果。

transform:translate y(-50%)；正如@Clint Warner在下面的回答中指出的，這是一個巧妙的技巧。缺點是它沒有從DOM中移除空間，我添加了一個邊距-top:-1.9 rem；到。移除空格的元類。

* {
    box-sizing: border-box;
}

p {
    margin: 0;
}

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

body {
    display: grid;
    justify-content: center;
    grid-auto-flow: column;
    gap: 1rem;
}

.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;

    outline: 2px dotted red;
    transform: translateY(-50%);
}

.logo img {
    width: 50%;
    aspect-ratio: 3/2;
    object-fit: contain;

    padding: 0.2rem;
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25);
    pointer-events: all;
}

.meta {
    margin-top: -1.9rem;

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

<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>

<div class="card">
    <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />

    <div class="logo">
    
        <!-- Photo with more height than width -->
        <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/batman-the-ride-six-flags-magic-mountain-valencia.png" />
    </div>

    <div class="meta">
        <p>Name here</p>
        <p>Sub title here</p>
    </div>
</div>