如何在侧边栏保持图像垂直答案

【问题标题】：how to keep image vertical on side bar如何在侧边栏保持图像垂直
【发布时间】：2017-07-21 06:41:55
【问题描述】：

我正在制作只是拨号练习的克隆，但我卡在了侧边栏中。它在侧边栏上显示水平图像而不是垂直图像。请告诉我解决方案，以便我可以继续。

HTML 代码

<aside class="side-border" id="side-border-right">
        <div class="right-side"><img src="images/j1.png"</div>
   </aside>

CSS 代码

.side-border {
    background: none repeat scroll 0 0 #ccc;
    bottom: 0;
    color: #9ca0a6;
    font-size: 11px;
    letter-spacing: 0px;
    font-weight: 400;
    padding: 0 24px;
    position: fixed;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    white-space: nowrap;
    width: 171px;
    z-index: 40;
}

.side-border>div {
    display: inline-block;
    height: 12px;
    left: 24px;
    line-height: 12px;
    margin-top: 150px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    width: 300px;
}

.side-border>div.right-side {
    left: auto;
    right: 34px;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform-origin: 100% 100% 0;
    -moz-transform-origin: 100% 100% 0;
    -webkit-transform-origin: 100% 100% 0;
    -o-transform-origin: 100% 100% 0;
}

【问题讨论】：

您是在谈论带有“免费列表”文本的图像吗？还是公交车图片？
我说的是免费上市
从您的 css 中，您正在转换父元素，而不是图像。你可以给图像添加一个类，然后从 CSS 中放入类似 transform: rotate(90deg);
@joraid...它正在工作..谢谢

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

只需在 .right-side 元素中使用这个 css。您不需要在父元素中使用样式。尽管您也可以在图像中使用这些样式。看这里……

.right-side {position: absolute; right: 0px; top: 50%; transform-origin: 100% 0% 0; transform: rotate(90deg) translateX(50%);}

&lt;div class="right-side"&gt;&lt;img src="http://www.cutetravelmate.com/images/priority_shinet1.gif"&lt;/div&gt;

【讨论】：