Question 44947 in Html Question posted in
Some basic documentation can be found here.

Object-position cutting off one side of image – Html

I’m trying to align the content of two images (in this case aligning the placeholder 150×150 label). The second image needs to be lower than the first.

div {
  background-color: purple;
  display: flex;
}

img {
  display: block;
  border-radius: 30px;
  align-self: start;
}

#img2 {
  margin-top: 50px;
  object-position: 0px -50px;
}
<div>
  <img src='https://via.placeholder.com/150' />
  <img src='https://via.placeholder.com/150' id='img2' />
</div>

I shift the second image down 50px and raise its contents by putting the objectposition up 50px, but it cuts off the bottom side of the image, it happens even when i use regular taller images
It doesnt seem to be an overflow issue. How can i fix this?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed it by taking a look at Aurélien's answer. Also the main issue was that I needed a container for each image and to put margin-top on a container instead of the actual image

    #cont {
  background-color: purple;
  display: flex;
  gap: 20px
}

.img-cont {
  overflow: hidden;
  width: 150px;
  height: 200px;
  border-radius: 20px;
  background: red;
}

.img-cont2 {
  margin-top: 50px;
}


#img2 {

  object-position: 0px -50px;
}
    <div id='cont'>
  <div class="img-cont">
    <img src='https://via.placeholder.com/150x300' /></div>
  <div class="img-cont img-cont2">
    <img src='https://via.placeholder.com/150x300' id='img2' /></div>
</div>


  2. 0

    What do you mean by "and raise its contents" ? The content of the image ???
    Anyways, maybe this is what you are trying to do:

    div {
  background-color: purple;
  display: flex;
}

img {
  display: block;
  border-radius: 30px;
  align-self: start;
}

#img2 { 
  position: relative;
  top: 50px;
}
      <div>
    <img src='https://via.placeholder.com/150' />
    <img src='https://via.placeholder.com/150' id='img2' />
  </div>
    Login or Signup to reply.
  3. 0

    Your code works perfectly, as long as the images are the same size as the divs, the result will always be this one.
    To get the result I think you’re trying to get, your images need to be larger than the divs, and the divs need to have a overflow: hidden
    scale image up

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search