How to rotate image with CSS only

0 votes

With CSS alone, I want to rotate an image by 90 degrees.

Although I may rotate the image, the position is not what it should be. It will first override a few other elements in the same div>. Second, it will grow vertically to be larger than the contained div>.

Here is my code, which defines the two classes:

.imagetest img {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  width: 100%;
}

.photo {
  width: 95%;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
  background: #828DAD;
}
<article>
  <section class="photo">
    <div>Title</div>
    <div class="imagetest">
      <img src="https://picsum.photos/200/100"/>
    </div>
  </section>
</article>

Is it possible to maintain the image inside the section? I can scale and translate the image to fit it within the section, but that only works if I am aware of the image's dimensions beforehand. A trustworthy approach that is independent of size is something I'd want to have.

Aug 22 in CSS by Edureka
• 11,040 points
118 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
189 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
175 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31 in CSS by Edureka
• 9,540 points
51 views
0 votes
1 answer

How to overlay image with color in CSS?

Use the rgba() Function to Overlay Background ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
54 views
0 votes
0 answers

How to position text over an image with CSS

How can I use CSS to center ...READ MORE

Jul 11 in CSS by Edureka
• 11,040 points
36 views
0 votes
1 answer

"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

The first thing to highlight is that ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
1,000 views
0 votes
1 answer

CSS3 Rotate Animation

I noticed that there is an ERROR ...READ MORE

answered Feb 18 in Others by Aditya
• 7,660 points
65 views
0 votes
0 answers

CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get ...READ MORE

Jun 22 in CSS by Edureka
• 11,040 points
54 views
0 votes
1 answer

Render HTML to an image

To answer your question, there are a ...READ MORE

answered Feb 8 in Java by Soham
• 9,330 points
621 views
0 votes
0 answers

Replacing H1 text with a logo image: best method for SEO and accessibility?

i want to link my logo to ...READ MORE

Feb 14 in Others by Kichu
• 19,040 points
1,478 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP