境界線の高さをすべてのデバイスで同じように表示する方法

debugcn 投稿 Dev

ザーイド・カーン

私は2つの境界線を設計しました。1つは画像の後ろ（黒い境界線）、もう1つは画像の後ろ（緑の境界線）です。すべてのモバイルデバイスで両方の境界線の高さを同じにしたい。モバイルの画面サイズ320pxに合わせて枠線の高さを設定しましたが、画面サイズを別のサイズ（375px、414pxなど）に変更しようとすると、通常のサイズから外れてしまいます。すべてのデバイスで同じように表示するにはどうすればよいですか。私はモバイルファーストのアプローチを使用しています。

HTML：

<div class="img-border1" >
            
     <img src="https://cdn.cnn.com/cnnnext/dam/assets/201209140756-jimenez-covid-19-vaccine-distribution-rural-us-dnt-vpx-super-169.jpg" alt="">
 </div>

SCSS：

.img-border1{
    position: relative;
    border: 4px solid #000;
    width: 20%;
    height: 200px;
  
    img{
        position: absolute;
        width: 100%;
        transition: .25s;
        left: 10px;
        top: 10px;  
    }
    
    &::after{
        border: 4px solid green;
        content: "";
        display: block;
        position: absolute;
        top: 20px;
        left: 15px;
        right: -20px;
        bottom: -15px;
    }
}

視覚的な表現は次のとおりです。Codepen

Chrome開発ツールでさまざまなモバイル画面サイズを設定することで確認できます。

助けていただければ幸いです。

デッドプール

問題はあなたの身長ではありませんdiv。しかし、画像の高さが一貫していません。幅に％を使用しているため、高さも小さくなります。

divの高さはconstant常に200pxです。

したがって、画像の高さと幅を修正する必要があります。常に200px程度である必要があります。小さくすると、後ろのdivの<div class="img-border1" >高さが200pxのままになり、壊れているように見えます）。

SCSSを次のように変更します。

.img-border1{
    position: relative;
    border: 4px solid #000;
    height: 200px;
    width:350px;
    background: yellow;
  
    img{
        position: absolute;
        height: 180px;
        transition: .25s;
        left: 10px;
        top: 10px;  
    }
    
    &::after{
        border: 4px solid green;
        content: "";
        display: block;
        position: absolute;
        top: 20px;
        left: 15px;
        right: -20px;
        bottom: -15px;
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-13

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

境界線の高さをすべてのデバイスで同じように表示する方法

境界線の高さをすべてのデバイスで同じように表示する方法

線の高さをすべて同じにする方法は？

空白がないようにすべての記事でボックスの高さを同じにする方法

アプリをすべてのデバイスで同じように表示するにはどうすればよいですか？

Swift Xcodeのすべてのデバイスの画面全体の周囲に境界線を作成するにはどうすればよいですか？

RoundedRectの境界線の輪郭をPyQt / PySideですべて同じ幅でペイントするにはどうすればよいですか？

ブートストラップボックスをすべてのデバイスで同じ高さにする

Bootstrap 4の列をすべて同じ高さにするにはどうすればよいですか？

Bootstrap 4の列をすべて同じ高さにするにはどうすればよいですか？

Bootstrap 4の列をすべて同じ高さにするにはどうすればよいですか？

Bootstrap 4の列をすべて同じ高さにするにはどうすればよいですか？

Bootstrap 4の列をすべて同じ高さにするにはどうすればよいですか？

Bootstrap 4の列をすべて同じ高さにするにはどうすればよいですか？

デバイスに応じてUITableViewCellの高さを動的に計算する方法

cssのすべてのデバイスでボタンが同じように見えるようにするにはどうすればよいですか？

最初のデータのみが表示されます。同じIDのすべてのデータを表示するにはどうすればよいですか？

画像ビューをすべてのデバイスで同じように見せます

すべての高さを表示するようにLinearLayoutLayoutParamsを設定する方法

すべてのデバイスで同じになるように、divを別のdivの上に配置します

テキストコンテンツに基づいて、すべてのdivを同じ高さにするにはどうすればよいですか？

タイムピッカーとデートピッカーをすべてのデバイスで同じように表示するにはどうすればよいですか？

異なるサイズのシンボルに対して同じサイズの境界線を作成するにはどうすればよいですか？

typescriptを使用してangular2でデバイスの表示の高さと幅を取得するにはどうすればよいですか？

typescriptを使用してangular2でデバイスの表示の高さと幅を取得するにはどうすればよいですか？

RecyclerViewにすべての画像を同じサイズで表示するように強制する

複数のボックスで同じボックス オーバーレイの高さを管理するにはどうすればよいですか

wlan に接続されているデバイスのすべての IP を表示するにはどうすればよいですか?

iPhone 4s、5、6の画面サイズを処理し、すべてのコンテンツをすべてのデバイスで同じように見せるための方法

AndEngine：すべてのスプライト画像を同じように表示

すべての要素を同じ高さに連続して作成する方法

複数のボックスで同じボックスオーバーレイの高さを管理するにはどうすればよいですか