Question

我无法让图片旋转。我已经尝试在CSS中使用图像旋转属性，但似乎没有诀窍。图像上方的元素是浮动元素。我不确定他们是否会以某种方式干扰图像。

＆＃13;

<h1>Postioning Practice</h1>
<h2>Using Floated Elements</h2>

<div id="wrapper">
  <div class="float">
    <h3>Position 1</h3>
    <p></p>
  </div>

  <div class="float">
    <h3>Position 2</h3>
    <p>.</p>
  </div>

  <div class="float">
    <h3>Position 3</h3>
    <p></p>
  </div>

  <div class="float">
    <h3>Position 4</h3>
    <p>.</p>
  </div>

  <a href="yingCake.jpeg">
    <img src="yingCake.jpeg" alt="Image of Ying eating cake">
  </a>
</div>

＆＃13;

type TestFunc = (outerArg: string) => <T>(innerArg: T) => number

＆＃13;

Answer 1

应归功于@zsawaf，但要回答这个问题。注释中指示image-orientation仅适用于firefox浏览器。

而是在你的css文件中使用：

transform: rotate(90deg);

Answer 2

您需要使用“transform：rotate（）”而不是图像方向;

所以你的图像的CSS应该是这样的;

img {
  display: block;
  margin: 0 auto;
  clear: both;
  max-width: 70%;
  transform: rotate(90deg);
}

<h1>Postioning Practice</h1>
<h2>Using Floated Elements</h2>

<div id="wrapper">
  <a href="yingCake.jpeg">
    <img src="yingCake.jpeg" alt="Image of Ying eating cake">
  </a>
</div>

image-orientation是一项实验性功能，浏览器支持有限。

图像不能在CSS中旋转

2 个答案: