html - 如何将我网站上的图像设置为正确的旋转？

Question

这是我网站上带有上述图片的关于我页面的链接。 about.html

我已经通过谷歌搜索“wrong image rotation html and css”完成了自己的一些研究，并找到了图像方向:-90deg；我已将其设置为 -90 度的属性，正如您在提供的代码中看到的那样，尝试将图像旋转到所需的方向。

我使用的是 Chrome，但该属性不起作用，所以我也在 Firefox 中尝试了该页面，但错误的方向仍然存在。

我还检查了开发工具以查看该属性是否被识别，发现该属性旁边有一个黄色警告标志，表明该属性未被识别

有什么替代方法可以解决这个问题吗？

这是与页面上的图像相关的 html 代码块:

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

这里是与上面的 html 代码相关的 CSS:

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

.col-6{
width:50%;}

如果问题不够清楚，或者您对以后的问题有任何改进，请在评论中告诉我。我不会生气的!谢谢。

Answer 1

您可以使用 CSS transform 属性

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