Rotate image overlap

Question

Here is my codepen : https://codepen.io/Johngtrs/pen/oNWLYEw

I have two problems. First when I click on the rotate button the image overlap on the other row (landscape) or on other columns when the default image orientation is portrait. And for the 2nd problem it's the image size in portrait orientation. It's too big. So in my codepen I set different images size to show you my problem like this :

1300x740      1300x740

500x1300      1300x740

1300x500      1300x740

I think I have an idea to solve this but I don't know how can I do that. My idea is to initialize the container and image size.

To solve the row overlapping problem, each row height container will be set by the largest side. If we are in portrait so the height of the row container will be the height of the image. If we are in landscape, so the height of the container will be the width. Like that each time I rotate my image it will not overlap on the other rows.

To solve the width problem to not overlap on the other columns when the default image orientation is portrait I want to initialize the image size like it should be. For example if you take these images in my codepen 500x1300 and 1300x500 if you rotate the 1300x500 image it's ok because this is the good size so I'd like to reduce the size of the 500x1300 to get the same size as 500x1300 to get a normal size and keep the image centered in the column. And I want to keep it responsive.

So I don't know if there is a good way to do that by using flexbox or something else to solve overlap problem.

CSS:

.row-documents {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.row-documents img {
    width: 615px;
}
.img-document {
    transition: all 0.3s ease;
}
.rotate-button {
    margin: 0 10px;
    width: 50px;
    display: flex;
    justify-content: center;
}

HTML:

user_16416717 · Answer

I've updated your Codepen with a working solution: https://codepen.io/FalloWingS/pen/wvdzKGZ

The idea of the solution is to fit the image in the box rendered on the initial load to prevent content from jumping. This could be achieved with the CSS Scaling when you rotate the image. Actually there are a lot more possible solutions for your task and a lot more edge cases to be solved: for example, it's possible to make images in rows depending on each other, portrait images can be loaded in a smaller size with downscaling on load to match landscape imape height. Or landscape image can be upscaled on rotation to take more space and match the height of the portrait image. Try to define the exact logic of what you need to achieve at least on paper - then I'll be able to help you with further improvements.

$('.btn-rotate').on('click', function () {
  let $img = $(this).parent().prev();
  let width = $img.width();
  let height = $img.height();
  let angle = ($img.data('angle') + 90) || 90;
  let scale = height < width ? height / width : width / height;
  if (angle % 180) {
    $img.css({'transform': 'rotate(' + angle + 'deg) scale('+ scale +')'});
    $img.data('angle', angle);
  }
  else {
    $img.css({'transform': 'rotate(' + angle + 'deg) scale(1)'});
    $img.data('angle', angle);
  }
})

.box {
  overflow: hidden;
}
.row-documents {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.row-documents img {
  margin: auto;
}
.img-document {
  display: flex;
  flex-basis: 45%;
  flex-grow: 0;
  transition: all 0.3s ease;
}
.rotate-button {
  align-self: center;
  margin: 0 10px;
  width: 50px;
  display: flex;
  justify-content: center;
  flex-basis: 5%;
  flex-grow: 0;
}

Rotate image overlap

1 Answers