調整css轉換圖像的父元素以適合。（Twitter Bootstrap）

我目前在一個新項目上使用Twitter Bootstrap。該項目的主要部分是一個縮略圖庫，與他們在示例中所使用的完全相同（此處爲：http://twitter.github.com/bootstrap/components.html#thumbnails）。調整css轉換圖像的父元素以適合。（Twitter Bootstrap）

問題是我目前正在根據他們的EXIF取向數據在需要時進行css轉換（旋轉，基本上）圖像。當我使用變換（現在使用-webkit-transform，因爲我在Chrome上測試）到img時，其父元素保持不變，並且圖像「溢出」其容器。

使用Chrome，可以測試此行爲進入之前鏈接的示例縮略圖庫，檢查其中一個佔位符圖像並將style="-webkit-transform: rotate(90deg)屬性添加到img標記。圖像溢出li容器元素並中斷佈局。

有沒有辦法解決這個問題，並有bootstrap對待一個CSS旋轉的圖像，就好像它原來是這樣？我想到了手動設置標籤的高度和寬度，他們的父母會調整，但我不知道在服務器端渲染圖像的大小，然後才能真正呈現，這似乎排除這種方法。

哦，順便說一句，「我知道我可以在服務器端進行輪換，我知道這並不難，我只是非常希望在瀏覽器中儘可能地做到這一點。

任何想法？

謝謝！

編輯：Jaap建議我旋轉整個容器，如果不是因爲我在縮略圖li s內有文本節點，這將完美地工作。旋轉容器也會使文本顯示旋轉。

來源

2012-05-30 malvim

好了，在這種情況下，你應該應用它是這樣的：

<ul> 
<li class="span3 cw rotated"> 
    <div class="thumbnail"> 
     <img src="http://placehold.it/200x180" alt=""> 
     <div class="caption"> 
      <h5>Thumbnail label</h5> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> 
     </div> 
    </div> 
</li>

.cw img{ 
    -webkit-transform: rotate(90deg); 
    height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */ 
} 
.ccw img{ 
    -webkit-transform: rotate(-90deg); 
    height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */ 
}

退房小提琴：http://jsfiddle.net/dGgrG/4/

唯一討厭的一點是，MAX- Bootstrap中的寬度東西會增加縱橫比。這將發生在您使用Bootstrap網格時。你可以在整個CSS中否決它，或者JavaScript可能會幫助你。

要與JS解決它，你應該看看這2個職位：

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

jQuery resize to aspect ratio

來源

2012-05-31 08:59:51 Jaap

您應該將旋轉應用於容器，而不是img。

http://jsfiddle.net/jaap/dGgrG/1/

你將面臨然而接下來的問題是，旋轉從原來的位置上。

來源

2012-05-30 08:05:21 Jaap

嗨！謝謝您的回答。我忘了說我已經嘗試過了，但是我在縮略圖裏有其他節點（標題文本）。如果我旋轉父項，文本也會旋轉。我會更新並說。 – malvim

僅供參考，根據EXIF數據解決圖像旋轉的（新）CSS方式是image-orientation: from-image屬性。

從http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/

這些問題都是由新的CSS圖像取向屬性，當風格圖像的取向，這是現在的Firefox 26支持解決：從圖像應用於JPEG圖像時，瀏覽器將在執行佈局和渲染時考慮其EXIF方向標記。這意味着智能手機和數碼相機圖像現在可以通過瀏覽器本地顯示正確的方向，只需添加一個CSS屬性即可！

這是本文中的第一張圖片，但這次是應用了圖片方向。如果您使用的是Firefox 26，則會看到按原計劃呈現的這張圖片，頂部是天空，底部是地面。

來源

2013-09-14 16:24:46 mikel

謝謝，這真是太棒了！ – malvim

小心：在目前這似乎只有Firefox支持。 – Micronax

調整css轉換圖像的父元素以適合。 （Twitter Bootstrap）

回答

相關問題

調整css轉換圖像的父元素以適合。（Twitter Bootstrap）