応答性のあるプロフィール画像を作成する

Question

開けばメニューが表示され、あなたの名前、メール、プロフィール画像が表示されます。navメニューです。私が直面している問題は、ユーザーがプロフィール写真をアップロードするときです幅と高さが異なる場合があります）、ボーダー半径を使用すると、私は望ましくない結果になります。デスクトップでうまくいくものは、モバイルではひどく見えます。

$menu = "<nav id='menu'> 
         <ul> 
                 <li><table border='0' width='100%%'> 
                 <tr> 
                 <td rowspan='2' style='width:30%;height:100%;padding-bottom:5px;padding-left:5px;'><div style=\"display: inline-block; 
    width: 100%; 
    height: 150px; 
    border-radius: 50%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    background-image:url('" .$mem_avatar."')\"></div></td> 
                 <td style='70%; padding-left:5px;'><ul><li><h2>$mem_name $mem_surname</h2></li><li ><h4>$mem_email</h4></li></ul></td> 

                 </tr> 
                 </table> 

誰かが自分の写真をアップロードするとき、それは上記のデスクトップおよびモバイルplatforms.Theの両方に正しく表示されるように、私はそれを修正したいと思いますデスクトップ上の絵で正常に動作しますが、次のようになります。以下のコードは を参照してください。モバイルでひどく圧迫された。私はwidth: 10vwheight:10vwを使ってみましたが、これはデスクトップ上でもうまく見えますが、モバイルでは小さく見えます。値を大きくすると、結果は逆になります。モバイルではよく見えるものはデスクトップではひどく見えます。

Answer 1

一般的なCSSの代わりにブートストラップを使用します。 あなたの要件に合わせて既製のクラスを提供します。 ブートストラップでは、反応しやすい画像が自動的に画面のサイズに合わせて調整されます。

<img>タグに.img-responsiveクラスを追加して、応答性のある画像を作成します。イメージは親要素にうまくスケールされます。

.img-responsiveクラスは、イメージにdisplay: block;とmax-width: 100%;とheight: auto;を適用します。

<img class="img-responsive" src="img_chania.jpg" alt="Chania"> 

は、それはあなたのお役に立てば幸いです。