在花了比我愿意承认的更多的时间之后，关于this answer的第一条评论为我指明了方向，我认为这是解决问题的唯一纯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>

我采用了这种方法，我将aspect-ratio: 3/2;设置为红色轮廓中的图像，并将object-fit: cover;填充图像并剪切其余不符合比例的图像。确保它尊重50%的宽度。
我在演示中包括了第二张卡，它的高度更高，可以看到不同大小的徽标的效果。
transform: translateY(-50%);是@克林特Warner在下面的回答中指出的一个巧妙的技巧。缺点是它不会从DOM中删除空间，我在.meta类中添加了一个margin-top: -1.9rem;来删除空间。

* {
    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: cover;

    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://fastly.picsum.photos/id/364/200/300.jpg?grayscale&hmac=sNR8yah-5zdepmSLESCJXlBgH-dL6avILopYuRUCdSU" />
    </div>

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