如何使图像垂直显示？

Question

我正在从语义UI反应中使用Image来显示图像。代码段如下所示：

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

image是指向“ https://firebasestorage.googleapis.com/v0/b/freebies-df71a.appspot.com/o/m0PSbkGseb6gK85HWRuE%2Fphotos%2FIMG_9743.JPG?alt=media&token=7cef5382-5308-44da-b47d-e8780d279f22”的链接

如果您检查链接，则会看到具有垂直显示的图像。但是，当它显示在<Image>中时，该方向将变为水平。检查以下屏幕截图： 有人可以帮助我将图像定位到正确的方向吗？谢谢！

Answer 1

image-orientation可以为您提供帮助，但只能与firefoxe一起使用，干净的解决方案是在上载图像之前或通过服务器脚本编辑图像并旋转图像：img tag displays wrong orientation这里的一些提示。 >

通过CSS只能有一个花招，它看起来不太好，并且随时可能会破坏。

这是从正方形开始进行变换的一个技巧，因此使用的空间可以相同，旋转后不会重叠：

• 将图像包装到import matplotlib.pyplot as plt import skill_metrics as sm plt.close('all') sm.taylor_diagram(23.6,36.,0.48) plt.show() 中，
• 将span变成一个内联框，（可以是：内联块，内联flex，内联网格或内联表）
• 将该跨度设为正方形（会有空白）
• 然后通过span旋转

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 :( */
}

Answer 2

一个简单的解决方案是给它一个类，然后使用transform旋转图像。

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

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