job.answiz.com
1 Answer
  • 0
Votes
name
name Punditsdkoslkdosdkoskdo

how to rotate image with css

I would like to rotate an image by 90 degrees with CSS only. I can do the rotation, but then the position of the image is not what it should be. First, it will overlay some other elements in the same div, and second, its vertical dimension will become bigger than the containing div. Here is my code

class="photo">
Title
class="imagetest"> < class xss=removed> src="DSC01688.JPG" width=100%/>

where the two classes are defined as

.imagetest img {
transform:          rotate(270deg);
-ms-transform:      rotate(270deg);
-moz-transform:     rotate(270deg);
-webkit-transform:  rotate(270deg);
-o-transform:       rotate(270deg);
}
.photo {
 width: 95%;
 padding: 0 15px;
 margin: 0 0 10px 0;
 float: left;
 background: #828DAD;
}

Is there a way of keeping the image within the section? I can translate and scale the image so that it is within the section, but that works only, if I know the image size beforehand. I would like to have a reliable method that does not depend on the size.

name
  • 1
Teacher

Give the parent a style of overflow: hidden. If it is overlapping sibling elements, you will have to put it inside of a container with a fixed height/width and give that a style of overflow: hidden

  • 1
Reply Report