CODEWITHSUNDEEP
javascriptjqueryhtmlcssrotation
Ayeye Brazo
Ayeye Brazo

Reputation: 3476

Parent div to change dimension when inner image rotate

I have a modal containing one or more images and these images can rotate.

My issue is when image rotate it overflow the parent div. I wish to have the container to change dimension to always fit the image (images).

I created a codepen to have a look.

I tried to change many and many css properties without success...

Jade:

.overlay
.fake-modal
  .content
    img.img(src='http://lorempixel.com/output/abstract-q-c-300-200-2.jpg')
    .wrapper
      button.left rotate left
      button.right rotate right

Less:

.overlay {
  background-color: rgba(0, 0, 0, .7);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fake-modal {
  background-color: #fff;
  padding: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  height: auto;
  z-index: 1;

  .content {
    position: relative;

    .wrapper {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
}

js:

var angle = 0;
var btnLeft = $('.left');
var btnRight = $('.right');

btnLeft.on('click', function (e) {
  e.preventDefault();
  angle = angle - 90;
  rotate(angle);
});

btnRight.on('click', function (e) {
  e.preventDefault();
  angle = angle + 90;
  rotate(angle);
});

function rotate(rotateDegrees) {
  var r = 'rotate(' + rotateDegrees + 'deg)';
  var img = $('.img');
  img.css({
    '-moz-transform': r,
    '-webkit-transform': r,
    '-o-transform': r,
    '-ms-transform': r
  });
}

Upvotes: 2

Views: 811

Answers (2)

Domain
Domain

Reputation: 11808

you may set fixed width and height to div contaning image. http://codepen.io/anon/pen/XbQXJP

`.overlay {
  background-color: rgba(0, 0, 0, .7);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fake-modal {
  background-color: #fff;
  padding: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  height: auto;
  z-index: 1;

  .content {
    position: relative;

    .imgContainer {
      position: relative;
      width: 300px;
      height: 200px;

      .img {
        position: absolute;
        margin-left: -150px;
        margin-top: -100px;
        top: 50%;
        left: 50%;
      }
    }

    .wrapper {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
}`

Upvotes: 0

Ayeye Brazo
Ayeye Brazo

Reputation: 3476

Solved using getBoundingClientRect()

Codepen: http://codepen.io/anon/pen/BNENge

Upvotes: 1

Related Questions