1

I'm trying to rotate an image by a random angle using the solution suggested here: How to add a rotated image in CSS?

The problem is that the image ends up going out side the bounds of the location it was originally supposed to be at times. This shows what I mean: http://jsfiddle.net/jBHRH/82/ See how the corners of the image are cut off?

Is there a way with CSS or HTML to keep this from happening? Maybe something to do with background-size: contain;?

EDIT: I'm displaying this in a table cell with borders. So, when it's rotated, it ends up going beyond the bounds of the borders.

Community
  • 1
  • 1
gtilflm
  • 1,389
  • 1
  • 21
  • 51
  • Maybe the obvious answer...if the image were square it wouldn't be a problem :) – m59 Jan 29 '14 at 00:51
  • Are you calculating the rotation programmatically? You could use that to assign `left: XXpx; position: relative;` where XX is equal to the rotation offset. – brandonscript Jan 29 '14 at 00:51
  • @remus: Yes, I'm generating the rotation angle with PHP. How would you calculate the "rotation offset"? – gtilflm Jan 29 '14 at 00:53
  • heh, nevermind. width auto wins – brandonscript Jan 29 '14 at 00:55
  • Change your second div to . Any particular reason you need to use a table? – TimSPQR Jan 29 '14 at 00:55
  • @TimSPQR: I need a table because this is part of a larger installation in which the framework is built as a table. I could display the images within a table within that table though. Or in a
    , etc.
     – gtilflm Jan 29 '14 at 01:22

1 Answers1

2

I just set the width to:

width:auto;

http://jsfiddle.net/LB3dG/

brandonscript
  • 68,675
  • 32
  • 163
  • 220
loveNoHate
  • 1,549
  • 13
  • 21
  • Sorry, but I forgot to mention that I'm displaying these images in a table cell with borders. I tried the applying this to my application and it wasn't working for some reason. – gtilflm Jan 29 '14 at 01:00
  • @gtilflm Hmm, I saw your mentioning on that in your post and tried it. Well `border:2px black solid` on the `#cell` "worked" but had a space between the lower end of the image and the border...don't know. – loveNoHate Jan 29 '14 at 01:03
  • No dice. Check out what changing the height to "auto" does: http://jsfiddle.net/LB3dG/2/ – gtilflm Jan 29 '14 at 01:20
  • 1
    @gtilflm Ok, you have to change that always, there is no auto for all. Here an example: http://jsfiddle.net/L4jvS/. The `auto` gets set by the `font-size`, the background image does not change the measurements of the `table`... – loveNoHate Jan 29 '14 at 02:09