-2

How to create responsive Facebook like cover photo where the image should always maintain the top position, not stretched and being cut? I tried to inspect the codes of Facebook Cover Photo but I still can't understand how it works. I've provided sample images on what I need to achieve.

Desktop Image

Tablet View

Mobile View

These images are my current progress

Desktop View

Tablet View

Mobile View

These are my sample codes

HTML:

<div>
 <img src="onepiece.jpg" />
</div>

CSS:

div{
 max-width: 1024px;
 width: 100%;
 margin: 0 auto;
 height: 270px;
 position: relative;
 display: block;
 z-index: 1;
 overflow: hidden;
 margin-top: 5px;
 max-height: 100%;

}

img{
 width: 100%;
 height: auto;
 position: absolute;
 top: -134px;
}
WizKid
  • 4,888
  • 2
  • 23
  • 23
Paul
  • 1
  • 1
  • Facebook looks very different on many different devices, and personal profiles look different from Pages which look different from Groups in this regard. Can you at least add a screenshot illustrating what you're looking for? – ceejayoz Mar 14 '22 at 14:58
  • @ceejayoz I've already provided sample images on my question. Thanks. – Paul Mar 14 '22 at 15:04
  • They weren't there when I commented. I'd look at Bootstrap's aspect-ratio system (https://getbootstrap.com/docs/5.1/helpers/ratio/#aspect-ratios) and the background-size CSS param. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size – ceejayoz Mar 14 '22 at 15:18

1 Answers1

0

Try utilizing object-fit to keep the image the correct dimensions within an area, similar to when using an image in background-image CSS. The media queries I added are to adjust the size of the image container on the screen sizes from your screenshots.

div.img-container {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  height: 150px;
  position: relative;
  display: block;
  z-index: 1;
  overflow: hidden;
  margin-top: 5px;
  max-height: 100%;
}

img {
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 576px) {
  div.img-container {
    height: 225px;
  }
}

@media (min-width: 768px) {
  div.img-container {
    height: 270px;
  }
}
<div class="img-container">
  <img src="https://www.animationmagazine.net/wordpress/wp-content/uploads/One-Piece-1000-Commemorative-Battle-of-Onigashima-Visual-1000x600.jpg" />
</div>
wouch
  • 1,097
  • 4
  • 6