圖像的垂直放置使我的div脫離了文檔流

Question

我正在嘗試將圖像垂直放置在屏幕的左側（而不是div中的垂直對齊）。

我已經通過使用transform: rotate(270deg)實現了這一點transform: rotate(270deg) ，但是只要將此屬性transform放入CSS中，它就會使div脫離流程。 然后我使用了position (top, left, bottom, right)並使用了一些瘋狂的值，例如-1800px ...，將div （帶有圖片）帶到我想要的位置（左側，垂直）

問題是，當我縮小頁面時，頁面看起來很丑。 有人可以建議我一種方法來保持圖像垂直放置，但仍然傾向於放大或縮小

HTML：

<div class="leftSideLogo">
  <h1>Left side logo</h1>
  <img src="images/google_logo.png" alt="logo" />
</div>

CSS：

.leftSideLogotest
{
    float: left;
    width: 15%;
    transform: rotate(-90deg);
    transform-origin: top top;
    transform-style: preserve-3d;       
    background-color: red;
    background-image: url("../images/google_logo.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
}

.leftSideLogo
{
    //float: left;
    background-color: red;
    width: 100%;
    height: 130%;
    position: absolute;
    top: 375px;
    left: -500px;
    background-image: url("../images/google_logo.png");
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-90deg);
    //transform: scale(1,1);
    //z-index: +1;
}

.leftSideLogo img
{
    height: 100px;
    width: 80%;
    position: absolute;
    top: 30px;
}

Answer 1

這就是您想要得到的嗎？ 請參閱后面的演示（以及內部注釋）。

 body { margin: 0; } .left-logo { background: url("//dummyimage.com/200x50") 0 0 no-repeat; width: 200px; /*max value of image size*/ height: 200px; /*max value*/ position: absolute; /*or fixed*/ left: 0; top: 0; transform: rotate(-90deg); } .main-area { background: gold; margin-left: 50px; /*min value*/ } 

 <div class="left-logo"></div> <div class="main-area">main area</div> 

JSFiddle： http : //jsfiddle.net/7epwvjho/