How do i set my image on my website to the correct rotation?

Question

Here is the link to my about page on my website with the aforementioned image. about.html

I have already done some research of my own by googling "wrong image rotation html and css" and found the image-orientation: -90deg; property which I have set to -90degrees, as you can see in the code provided to try and rotate the image to the desired orientation.

I am using Chrome and the property didn't work so I also tried the page in Firefox and the wrong orientation was still present.

I also checked dev tools to see if the property was being recognised and found that the property had a yellow warning sign next to it indicating that the property wasn't recognised

Is there any alternative I can use to fix this?

Here is the block of html code related to the image on the page:

<div class="grid">
<img class="col-6" src="roughsite/framework/images/pele.jpg" alt="A picture of me!">
</div>

And here is the CSS related to the html code above:

.grid {
margin: 0 auto;
max-width: 960px;
width: 100%;}

.col-6{
width:50%;}

If the question isn't clear enough or you have any improvements for future questions please let me know in the comments. I wont be offended! Thankyou.

Answer 1

This answer worked fantastically and also removed the need for a lot of timely editing on my part. I will be doing further research into css to understand the code GCyrillus has provided

As dsenese1 proposed, you may use transform. You may also use some margins so the rotation doesn't make the image overlap other elements.

transformed element remains in the flux in their original position and sizes, only the visual is transformed, this is why i propose the use of margin

basicly, you could use such a selector :

div[class="grid"] img{
  transform:rotate(-90deg);
  margin:100px 0 80px 
}

___ Demo below

> 
>     div[class="grid"] img{
>     	transform:rotate(-90deg);
>     	margin:100px 0 80px	
>     }
> 
>     /* add borders to the div to see where it stands : */
>     div[class="grid"] {
>     	border:solid;
>     }
> 
> 

> 
>     <link href="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/css/main.css" rel="stylesheet"/>
>     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
>     <div class="grid height n1">
>         <div class="row">
>     	  <div class="col-12" id="ycmtxt">
>     	  <div id="toppad">Pele Butcher...Achieving is believing in yourself!</div></div>
>     	</div>
>     </div>
> 
>     <div class="grid height" id="navpad">
>         <div class="row">
>           <a class="col-3 n1" href="about.html"><div>About Me</div></a>
>           <a class="col-2 n1" href="portfolio.html"><div>Portfolio</div></a>
>     	  <a class="col-2 n1" href="cv.html"><div>CV</div></a>
>     	  <a class="col-2 n1" href="blog.html"><div>Blog</div></a>
>     	  <a class="col-3 n1" href="contact.html"><div>Contact</div></a>
>     	</div>
>     </div>
> 
>     <div class="grid">
>     <img class="col-6" src="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/images/pele.jpg" alt="A picture of me!">
>     </div>
> 
> 

I would also like the thank Paulie_D for his suggestion of using

-ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform: rotate(-90deg);

to rotate the image to its correct position. I didn't use this as I would've had to set the height and width of the image manually and also add more code into my css file. Thankyou.

Answer 2

As dsenese1 proposed, you may use transform. You may also use some margins so the rotation doesn't make the image overlap other elements.

transformed element remains in the flux in their original position and sizes, only the visual is transformed, this is why i propose the use of margin

basicly, you could use such a selector :

div[class="grid"] img{
    transform:rotate(-90deg);
    margin:100px 0 80px 
}

---

Demo below

div[class="grid"] img{
	transform:rotate(-90deg);
	margin:100px 0 80px	
}

/* add borders to the div to see where it stands : */
div[class="grid"] {
	border:solid;
}

<link href="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="grid height n1">
    <div class="row">
	  <div class="col-12" id="ycmtxt">
	  <div id="toppad">Pele Butcher...Achieving is believing in yourself!</div></div>
	</div>
</div>

<div class="grid height" id="navpad">
    <div class="row">
      <a class="col-3 n1" href="about.html"><div>About Me</div></a>
      <a class="col-2 n1" href="portfolio.html"><div>Portfolio</div></a>
	  <a class="col-2 n1" href="cv.html"><div>CV</div></a>
	  <a class="col-2 n1" href="blog.html"><div>Blog</div></a>
	  <a class="col-3 n1" href="contact.html"><div>Contact</div></a>
	</div>
</div>

<div class="grid">
<img class="col-6" src="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/images/pele.jpg" alt="A picture of me!">
</div>

Answer 3

You can use CSS transform Property

/* Rotate div */
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);