How to move an image up in a div so that the top is cropped, not the bottom?-CodePudding

I have a div containing an image that has been expanded to fit the entire page in width and most of the page in height.

.mainarea {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
.sliderarea {
    border: 0px solid red;
    width: 605%;
    height: 80vh;
}

.slideimg {
    width: 16.5%;
    height: auto;
}
.imagetext {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 50%;
    color: white;
}

<div >
<div ></div>

<div >
  <h1>Slogan</h1>
  <button>Place An Order</button>
</div>


<div >

  <img  id="pizza" src="https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8+w&pid=ImgRaw&r=0">
</div>
</div>
</div>

This is a series of images that are going to be sliding in from the side. Right now though I am primarily focused on the first image. The problem is that by expanding the image, it scaled automatically so that the bottom of the image is now cropped. Is there a way for me to push it upwards so that the top is cropped/hidden, and I can see the bottom. (I tried to use object-position: 0 -50%; but that did not work.)

CodePudding user response：

try replacing the slideimg class with this:

.slideimg {
    width: 16.5%;
    height: auto;
    position: absolute;
    bottom: 0;

}

CodePudding user response：

You could try object-position: 0 -200px;.

Here you are offsetting the Y position by negative 200 pixels.

For this solution you will need to adjust the offset for different resolutions by using media queries.