HTML, CSS and JS for image alignment, size and placement


#1

Hey there,

I am new to code, so be gentle :slight_smile:

If I have a navigation bar at the top of a webpage and then directly under that I want a background picture (for this experiment I will just choose a randomly sized photograph from my own collection). I’ll use that picture somewhat similar to how Facebook have their cover photo. But I have a very specific size limit and I also want that to change with device size.

    #container {
  width: 90%;
  margin: auto;
}

@media screen and (max-width: 768px){
#container {
  width: 90%;
}

That’s as far as I have got.

How do I make an image cut off its top or sides if it goes past a certain width or height but also do not stretch the image (the image needs to maintain its x,y sizes so it does not distort)?

I am only using HTML, CSS and JS at the moment.

Thanks in advance. Looking forward for the learning.


#2

I ended up using a style which seemed to work.

<style>
 .cover
{
  object-fit:
cover;
}
 </style>
  <img class="cover" src="picture.jpeg" alt="BackGround" style="width:100%;height:200px">