0

I have an image img.png with dimensions: width=300px, height=200px. This image is in a div container:

<div class='thumbnail'> <img id='imgX' src='img.png'> </div>

And the CSS are:

div.thumbnail {
    width: 500px;
    height: 300px;
}

div.thumbnail > img {
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

The image is displayed nicely. However, dynamically I can rotate the image with jquery using:

$("#imgX").css("transform","rotate(90deg)");

With this the image is rotated but it's out of the div container. How can I keep it inside?

Medical physicist
  • 2,510
  • 4
  • 34
  • 51

1 Answers1

0

Not sure if that's what you mean, but what about

div.thumbnail {overflow:hidden;}
Prinzhorn
  • 22,120
  • 7
  • 61
  • 65
  • Good idea! But I'd rather resize the image. But what's the simplest way to do it? – Medical physicist Jul 11 '13 at 10:53
  • `var image = $("#imgX"); image.css("width",image.height());` because after rotating 90deg the vertical edge is called width. But still needs some improvement. – mkutyba Jul 11 '13 at 10:59