How can I make image shown in vertical direction?

Question

I am using Image from semantic-ui-react to display an image. Code snippet is like below:

<Image
  src={image}
  fluid style={{filter: 'brightness(30%)'}} 
  as='a'
  href={image}
  target="_blank" //open image in new tab
/>

image is the link to "https://firebasestorage.googleapis.com/v0/b/freebies-df71a.appspot.com/o/m0PSbkGseb6gK85HWRuE%2Fphotos%2FIMG_9743.JPG?alt=media&token=7cef5382-5308-44da-b47d-e8780d279f22"

If you check the link, you would see an image with vertical display. However, when it's displayed in <Image>, the direction become horizontal. Check the screenshot below: Can someone kindly help me to position the image to the correct direction? Thanks!

Answer 1

image-orientation could have helped you but worked once only with firefoxe, the clean solution is to edit the image and rotate it before uploading it or via a server script : some hints here img tag displays wrong orientation.

Via CSS there can only be a trick, which won't look nice and can break anytime.

here is one trick with transform starting from a square so the space used reamins the same and nothing is being overlapped after rotation:

• wrap the image into a span,
• turn the span into an inline-boxe,(can be : inline-block,inline-flex,inline-grid or inline-table)
• make that span be a square (there will be a blank space) ,
• then rotate it via transform

span {
  display: inline-block;
  border: solid;
  transform: rotate(90deg);
  }
  
  /* demo*/
  span,img {
  max-width:100%;
  margin:auto; /* see the flex/grid effect for img */
}

span+span {
  display: inline-flex;
}

span:before {
  content: '';
  float: left;/* unused if flex parent*/
  padding-top: 100%;/* it will strectch the span to make a square 
  if img width is bigger than it's height, 
  else the whole trick do not work => NOTICE that disclaimer :( */
}

inline-block
<span><img src="https://i.stack.imgur.com/rfzjE.jpg"></span> 
inline-flex
<span><img src="https://i.stack.imgur.com/rfzjE.jpg"></span>

Answer 2

A simple solution is to give it a class and use transform to rotate the image.

<img className="rotate90" src="https://i.stack.imgur.com/rfzjE.jpg" />

.rotate90 {
   transform: rotate(90deg);
}