在所有web浏览器中保持图片的正确旋转

Question

我一直在思考如何解决我的问题:我网站上的一些图片在火狐和safari等浏览器中处于正确/正确的位置，而在IE和chrome等其他浏览器中却被逆时针旋转90度。我在互联网上找不到任何解决这个问题的技巧和技巧，所以我试着在这里问这个问题。

以下是出现问题的网页的链接:www.waxholmsartiet.se/kontact.php

Answer 1

这是您的css：

.rotate90 {
    /*-webkit-transform: rotate(90deg);/*Chrome, Opera, Safari*/
    /*-moz-transform: rotate(90deg);/*Mozilla firefox*/
    /*-o-transform: rotate(90deg);
    -ms-transform: rotate(90deg); /*IE9*/
    /*transform: rotate(90deg);*/

    width: 130px;
    height: 150px;
    text-align: center;
    background-color: transparent;
    image-orientation: 90deg;
}

所有的旋转变换都已注释。据我所知，图像旋转不是css属性。

另外，我建议您将旋转与其他属性分开：

.kontaktbild    {
    width: 130px;
    height: 150px;
    text-align: center;
    background-color: transparent;
}

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

并在需要旋转的图像中使用：

<img class="kontaktbild" src="Brostrom.jpg" alt="Broström">

或

<img class="kontaktbild rotate90" src="Brostrom.jpg" alt="Broström">