7

現在、新しいプロジェクトでTwitterBootstrapを使用しています。プロジェクトの主要部分は、例にあるものとまったく同じサムネイルギャラリーです（ここ：http ：//twitter.github.com/bootstrap/components.html#thumbnails ）。

問題は、現在、EXIF方向データに従って、必要に応じて画像をcss変換（基本的には回転）していることです。に変換を適用すると（Chromeでテストしているので、今のところ-webkit-transformを使用）img、その親要素は同じままで、画像はそのコンテナーを「オーバーフロー」します。

Chromeを使用すると、前にリンクしたサムネイルギャラリーの例に移動して、プレースホルダー画像の1つを調べ、タグにstyle="-webkit-transform: rotate(90deg)プロパティを追加して、この動作をテストできます。画像がコンテナ要素をimgオーバーフローし、レイアウトが崩れます。li

これを解決し、ブートストラップでcss-rotatedイメージを元々そのように処理する方法はありますか？タグの高さと幅を手動で設定することを考えたところimg、親が調整しましたが、実際にレンダリングされる前に、サーバー側で画像がレンダリングされるサイズがわからないため、これは除外されているようです。アプローチ。

ああ、ちなみに、サーバー側でローテーションすることに頼ることができることはわかっています。難しいことではないことはわかっています。可能であれば、ブラウザーでローテーションすることを強く望んでいます。

何か案は？

ありがとう！

編集：Jaapは、コンテナ全体を回転させることを提案しました。これは、サムネイル内にテキストノードがあるという事実がなければ完全に機能しますli。コンテナを回転させると、テキストも回転して表示されます。

4

3 に答える 3

1

参考までに、EXIFデータに基づいて画像の回転を解決する（新しい）CSSの方法がimage-orientation: from-imageプロパティです。

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

これらの問題はすべて、Firefox26でサポートされるようになった新しいCSSimage-orientationプロパティによって解決されます。スタイルimage-orientation：from-imageがJPEG画像に適用されると、ブラウザはEXIF方向タグを考慮に入れます。レイアウトとレンダリングを実行します。これは、単一のCSSプロパティを追加するだけで、スマートフォンとデジタルカメラの画像をブラウザによってネイティブに適切な向きで表示できるようになったことを意味します。

これがこの記事の最初の画像ですが、今回は画像の向きが適用されています。Firefox 26を使用している場合は、この画像が意図したとおりにレンダリングされ、空が上に、地面が下に表示されます。

于 2013-09-14T16:24:46.920 に答える
0

imgではなく、コンテナに回転を適用する必要があります。

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

ただし、次に直面する問題は、回転が元の位置から適用されることです。

于 2012-05-30T08:05:21.553 に答える
0

その場合は、次のように適用する必要があります。

<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/

唯一の厄介な点は、Bootstrapの最大幅のものがアスペクト比を台無しにすることです。これは、ブートストラップグリッドを使用するときに発生します。css全体でそれを却下するか、javascriptが役立つ可能性があります。

JSで修正するには、次の2つの投稿をご覧ください。

JavaScriptで画像の実際の幅と高さを取得しますか？（Safari / Chromeの場合）

jQueryのサイズをアスペクト比に変更

于 2012-05-31T08:59:51.403 に答える