Html - Image positioning CSS issue

rctneil
May 23, 2023
150 views
1 vote
2 Answers

I have created a small mockup of the issue here: https://codepen.io/rctneil/pen/PoBgZEe?editors=1100

What I wish to achieve is effectively to remove the space above and below the logo inside the dotted red outline.

I want to keep the logo in exactly the same place as it is (horizontally centered and vertically centered on the photo’s bottom edge), but remove the space above and below. This should reduce the overall height of the card.

I do not know the dimensions nor aspect ratio of the logos ahead of time.

Any ideas?

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

Tags: css html

Answers

After spending more time on this than I would care to admit, the first comment on this answer pointed me in the direction of what I believe to be the only pure CSS way to solve your problem. Apparently, when calculating top padding and margin, percentage values are taken from the width of the element. Supposedly the only way to get the height is to use a transform.

The following code should provide what you need:

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

I took this approach where I set a aspect-ratio: 3/2; to the image in the red outline and object-fit: cover; to fill the image and clip the remaining that doesn’t fit the ratio. Making sure it respects the width of 50%.

I included a second card in demo with an image that’s taller in height to see effects of a different sized logo.

transform: translateY(-50%); is a neat trick as pointed out by @Clint Warner in answer below. Drawback is that it doesn’t remove space from the DOM and I added a margin-top: -1.9rem; to the .meta class to remove space.

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Image positioning CSS issue

Answers