用css旋轉圖像

我想用CSS僅旋轉90度的圖像。我可以做旋轉，但是然後圖像的位置不是它應該的。首先，它會覆蓋同一個div中的其他元素，其次，它的垂直維度會比包含div的大。這裏是我的代碼用css旋轉圖像

<article> 
<section class="photo"> 
<div>Title</div> 
<div class="imagetest"> 
<img src="DSC01688.JPG" width=100%/> 
</div> 
</section> 
</article>

，其中兩個班被定義爲

.imagetest img { 
transform:   rotate(270deg); 
-ms-transform:  rotate(270deg); 
-moz-transform:  rotate(270deg); 
-webkit-transform: rotate(270deg); 
-o-transform:  rotate(270deg); 
} 
.photo { 
width: 95%; 
padding: 0 15px; 
margin: 0 0 10px 0; 
float: left; 
background: #828DAD; 
}

是否有保持區間內圖像的方式？我可以翻譯和縮放圖像，使其位於該部分內，但只有在我事先知道圖像大小的情況下才有效。我想有一個可靠的方法，不依賴於大小。

來源

2012-12-02 v923z

給父母一個overflow: hidden的風格。如果它是重疊的兄弟元素，則必須將其放置在具有固定高度/寬度的容器中，並給出overflow: hidden的樣式。

來源

2012-12-02 21:34:20

感謝您的及時回覆！這確實解決了這個問題。 – v923z

看了一眼，這一行就是答案 –

麻煩看起來像圖像不是方形的，瀏覽器也是這樣調整的。旋轉後，通過更改圖像邊距確保尺寸保持不變。

.imagetest img { 
    transform: rotate(270deg); 
    ... 
    margin: 10px 0px; 
}

數量將取決於圖像的高x寬的差異。您可能還需要添加display:inline-block;或display:block以使其識別邊距參數。

來源

2014-11-05 00:42:45

用css旋轉圖像

回答

相關問題