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.
These images are my current progress
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;
}
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>