Photoshop Question posted in
The official user guide can be found here.

How to move the POV of an image when using overflow: hidden? – Photoshop

So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using overflow: hidden;.
Now my next problem; How would I have the image show a part I want, meaning, when using the overflow:hidden it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks.
Edit: My layout is: parent div with the image div as the child. Parent div’s height defined at 600px and width at 100%. And height and width of image div defined as 100%.
Default Size

what css defaultly does

what i want it do (middle pov)
what i want it do (bottom pov)

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Here is my answer/solution for anyone that comes across this post.

    #Banner {
  width: 100%;
  height: 350px
}
#backgroundBanner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#backgroundBanner img {
  width: 100%;
  position: relative;
  top: 70%; /*make changes to this and below to adjust the positioning of the image*/
  transform: translateY(-70%);
    <div id="Banner">
  <div id="backgroundBanner">
    <img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
  </div>
</div>


  2. 0

    In which way are you using this image?

    If you’re using this as a background image the solution is much simpler and would simply involve using background positioning. If you’re using this as an image pulled in using an img tag you can try the below to manipulate the image.

    Be aware that this won’t work on every browser.

    .new-image-container {
  position: relative;
  width: 250px;
  height: 250px;
  overflow: hidden;
}
.new-image-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-90%);
      -ms-transform: translate(-50%,-90%);
          transform: translate(-50%,-90%);
}
    <div class="new-image-container">
    <img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>
    Login or Signup to reply.
  3. 0

    Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:

    .container img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

    This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.

    You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.

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

Back To Top
Search