携帯電話で見たときにウェブサイト上の画像を回転させる方法（CSS）（thesitewizard.com）

1月 21, 2022

携帯電話で見たときにウェブサイト上の画像を回転させる方法（CSS)

小さな画面でその側にある画像を回転させる

クリストファー-ヘン著、thesitewizard.com

訪問者は、誰かが携帯電話で自分のウェブページを見たときに垂直に表示されるように、どのように画像を回すことができるかを私に尋ねました。つまり、彼は絵がデスクトップやラップトップコンピュータ上で、水平長い側で、その通常の方向に表示されることを望んでいたが、携帯電話上で回転したので、itslonger側は今垂直になりました。

前文

この記事では、コンピュータのモニターと携帯電話で異なる方法で表示する必要がある画像を扱っています。画像を永続的に回転させて、常にその位置に表示されるようにしたい場合は、animage editortoを使用してください。これははるかに簡単で効率的であり、CSSを回転させるときに発生する問題を回避します。
画像を回転させる代わりに、携帯電話の画面の幅に合わせて縮小することです。 Mostwebsitesはそれをそのようにします。あなたがそれを好む場合は、代わりにあなたの画像をモバイルフレンドリー（レスポンシブデザイン）にするreadHowtoしてください。携帯電話で見ていると、サイト上の画像がどのように表示されているかを示す記事もあります。
私の訪問者は、モバイル-FriendlyLayoutウィザードによって生成された2列のレイアウトを使用したウェブサイトを持っていましたが、任意のレイアウトを使用して設計されたウェブサイトでは、以下に説明するテクニックを使用することもできます。つまり、この方法は使用できる一般的な方法ですあなたがサイトをどのように設計したかにかかわらず。
明らかに、この記事はあなたがすでにウェブサイトを持っていることを前提としています。そうでない場合は、ガイドから始めてくださいウェブサイトを作成する方法。基本的な設計を完了した後は、いつでもこの記事に戻って物事を微調整することができます。

CSSで画像を回転させる方法

idが”demo_picture”の画像があるとしましょう。回転させるには、次のCSSを使用します。

#demo_picture{transform:rotate(270deg);}

これで画像が間違った方向に回転する場合は、代わりにrotate(90deg)を使用してください。あなたが推測したかもしれないように、あなたは好きな角度を使うことができます。私の270度と90度の使用は、手元のトピックは、その長さが高さになり、その逆になるようにそれを回すことです。

しかし、上記のコードを使用するだけで、すぐに問題に気付くでしょう。画像はその中心の点を中心に回転します（英語のadifferentvariantを使用する場合は”center”）。これは、回転された画像がその上と下のコンテンツに重なることを意味します。

この時点で、あなたはおそらく、”うーん。それは解決するのは簡単です。私はちょうど回転した画像のための十分なスペースを与える固定された高さのitown DIVブロックに画像を入れます。”

だから、画像の幅が（たとえば）202ピクセル、高さが42ピクセルの場合、HTMLは次のようになります:

<div><img src=”../img/logo202x42.そして、DIVブロックに必要な高さを与えるCSSは次のとおりです。

#demo_container{height:202px;}
#demo_picture{transform:rotate(270deg); }

残念ながら、コードをそのまま使用すると、コンテナに必要な高さがありますが、回転した画像は、その上の段落と重なり合って下に大きなギャップを残

トリックは、それを回転させる前に元の位置を調整し、最終的な出力が正しい場所になるようにすることです。回転した結果が上記のテキストをカバーしないようにするには、それに割り当てられたDIVブロックでは、(width - height)/2に等しい距離を下に移動する必要があります（”/” この計算を手動で簡単に実行し、結果をCSSに入れるか、最終的な数値を取得した方法の記録を残したい場合は、ブラウザに”calc((202px - 42px)/2)“で計算をさせてくださあなたは、もちろん、あなたのイメージに適したものに番号を変更する必要があります。このチュートリアルではcalc()関数を使用して、結果にどのように到達したかをより明確にします。

上の位置を変更するには、margin-topルールを使用したり、tranform関数を引き続き使用したい場合はtranslateY()を使用したりするなど、さまざまな方法で行うことができます。

次の例では、次のように使用しますmargin-top:

#demo_picture{
margin-top:calc((202px-42px)/2);
transform:rotate(270deg);
}

以下のコードでは、変換関数を使用しています:

#demo_picture{
transform:translateY(calc((202px-42px)/2))rotate(270deg);
}

translateY()を使用する場合は、操作の順序が重要であるため、変換の前に翻訳が行われていることを確認してください。

上のデモ画像は、前述のexactコードを使用して、margin-topで上部の位置を調整し、回転させました。しかし、私が言ったように、あなたはあなたが望む任意のCSSの配置方法を使うことができます。

携帯電話や小さな画面で見たときにのみ画像を回転させる方法

この時点で、携帯電話のような小さな画面で画像を見たときにのみ回転を行うと思うだろうが、そのデバイスの@mediaセクションにルールを置くだけでよい。

それは本当です。ポイントに。それ以上の行動を取らずにそれを行うと、おそらくさらに別の問題を解決するでしょう。モバイルフレンドリーなスタイルシートには、通常、次のようなルールがあります。

img{max-width:100% ; }

このルールは、小さな画面に収まるように大きな画像のサイズを変更します。これは、実際に画像のサイズを変更せずに回転させたい場合を除いて、正しい方法です。上記の包括的なルールでは、画像は回転する前にブラウザによってサイズが変更されますが、これはここでは必要ありません。また、画像は元の寸法を持たなくなるため、margin-top（またはtranslateYなど）の計算も中断されます。

これを修正するには、”#demo_picture“ルールに”max-width: none;“を追加します。

これを念頭に置いて、これまで蓄積してきたすべてのルールをスタイルシートに追加することができます。

layout Wizardによって生成されたテンプレートに基づいてページを作成し、モバイル用の1列モードに切り替えるポイントとして629ピクセルを選択したとしますphones.In このような場合は、”styles.css“ファイルの”@media“行の直後にルールを挿入します。

@メディアのみscreen and(max-width:629px){
#demo_picture{
max-width:none;
margin-top:calc((202px-42px)/2);
transform:rotate(270deg);
}
div#tswsidecol{
float:none;
width: 100% ;
}
… というように。..

レイアウトウィザードを使用しておらず、独自の@mediaセクションを作成する方法がわからない場合は、モバイルフレンドリーなウェブサイトを作る方法：CSSでレスポンシブデザインを最初に読んでください。上記のコードを盲目的にコピーしないでください。

電話でページをテストする必要があることに注意してください（または、それを模倣するためにサイズ変更されたデスクトップブラウザウィンドウ）。画像の幅と高さによっては、結果が表示されない場合があります。たとえば、画像が大きい場合は、最終的な出力が携帯電話の右側に部分的にクリップされることがあります。その場合は、適切な番号の画像に”margin-left“を設定して左に移動します。（ヒント：margin-leftで負の数を使用して、元の境界を超えて画像を左に移動します。)

ブラウザの互換性

変換関数は、すべての最新のブラウザで利用可能です。訪問者がInternet Explorer(現在は廃止されています)を使用している場合は、少なくともバージョン9が必要です。

著作権©2020Christopher Heng. すべての権利を保有します。
https://www.thesitewizard.com/から、webデザイン、プロモーション、収益、スクリプトに関するこのような無料のヒントや記事を入手してください。

この記事は役に立つと思いますか？あなたは上に公開されている新しい記事やスクリプトを学ぶことができますthesitewizard。COMBYはRSSの供給を予約購読する。 RSSフィードリーダーまたはRSSフィードをサポートするブラウザをhttps://www.thesitewizard.com/thesitewizardに向けるだけです。xml。あなたは私のRSS FAQからtoRSSサイトフィードを購読する方法についての詳細を読むことができます。

この記事を転載しないでください

この記事は著作権で保護されています。この記事の全部または一部をいかなる形式でも複製または配布しないでください。

ウェブサイト全体（またはその列）を埋めるために背景画像を伸ばす方法（HTML/CSS）
CSSを使用してDIVブロックを中央に配置する方法
CSSで画像を中央に配置する方法
Cssでテキスト/画像を含む長方形のボックスを作成する方法
ボックスの丸みを帯びた角を作成する方法CSSの境界線
Html/cssでツールチップを追加する方法（Javascriptは必要ありません）
独自のドメイン名を登録する方法
仲介者を介してではなく、ICANNに直接ドメ

新しい記事

テーブルの代替行に異なる色を与える方法（HTML/CSS）
無料のLET’S Encrypt SSL証明書を自分で生成する方法（Windows）コンピュータ
BluegriffonでWebページにメタタグを挿入する方法
ウェブサイトのリストからの歌（または他のオーディオクリップ）
Expression Web
無料でウェブサイトを作成する方法
なぜ私は私が望む任意のドメイレジストラを完全に廃止する方法はありますか？
ドメイン名レジストラとウェブホストの違いは何ですか？
モバイルに優しいウェブサイトを作る方法：CSSでレスポンシブデザイン
コンテンツ管理システム（CMS）、ブログ、ウェブエディタ、オンラインサイトビルダーの違いは何ですか？

このページへのリンク方法

あなたのページには次のように表示されます。

携帯電話で見たときにウェブサイト上の画像を回転させる方法（Css）

NCPEA Professor

Blog, Lifestyle and News