2

画面サイズに応じてdiv内の画像を回転させる方法を見つけようとしています。

基本的に、次の設定があります。

<div> <div with arrow pointing right > <div>

流動的な列（ブートストラップ）で、矢印の画像を下の位置まで90度回転させる必要があります。これは、モバイルではdivがスタックするためです。

空白<div>と背景画像とメディアクエリを使用して画像を変更することを考えましたが、<div>ピクセルサイズが設定された空白が必要になるのは良くありません（またはそうですか？）。

もう1つの考えは、<img>の中に矢印を配置し<div>、おそらくjQueryを使用して画面サイズに応じて回転させることでしたが、OTTのようであり、おそらく私を超えてそれを行う方法を理解しています。

どんな提案やヒントも歓迎されます。たぶん私は本当に単純なものが欠けています。

4

2 に答える 2

7

@Stuart のソリューションはうまく機能します。これは、CSS を使用する別の可能性です。これは必ずしもより良い答えではなく、ただ違うだけです。

http://jsfiddle.net/panchroma/u4zWp/

HTML

<img src="../image1.jpg" class="rotateMobile">

CSS 

@media (max-width: 480px) {

.rotateMobile{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
}

幸運を！

于 2013-02-06T16:49:00.360 に答える
2

2つの異なる画像を使用して2つの別個の同一要素を作成する場合、一方を1つのサイズで表示し、もう一方を非表示にするように設定できます。その逆も可能です。

例えば：

HTML

<img class="arrow" src="arrow.png" />
<img class="arrow90" src="arrow90.png" />

Css

.arrow{display:block;}
.arrow90{display:none;}

@media handheld, only screen and (max-width: 491px) {
    .arrow{display:none;}
    .arrow90{display:block;}
}
于 2013-02-03T13:58:32.993 に答える