私は、特定のプレースホルダ画像の代わりにユーザプロファイル画像が表示されるサイトで、ユーザの頭文字が表示されるサイトを見てきました。レスポンスを維持した複数の画像上の文字
は、私が試してみて、私のサイトの一つにこれを実装することに決めましたが、私は応答それを維持するのに苦労しています。
バックエンドに格納されている頭文字のすべての組み合わせを実際の画像に置き換えるのには、すぐれたソリューションが必要です。
このプロフィール画像は画面上の複数の場所に表示されるので、多くのガイドのような絶対的な位置付けはオプションではありません。私が思いついた
「ソリューション」は、以下のCSSクラスを利用する。これに加えて
.profile-image img.with-initials {
position: relative;
left: -10px;
width: 30px;
}
.profile-image .initials {
position: relative;
bottom: 2px;
left: 50%;
margin: 0 auto;
float: left;
z-index: 100;
}
.profile-image span.initials {
color: #efefef;
font-weight: 600;
font-size: 150%;
line-height: 35px;
letter-spacing: 1px;
}
私は、これらのクラスを追加し、ユーザーがプロフィール画像を持っているかどうかを最初に確認するためにテストし、もしいませんよ計算されたイニシャルを含む空白のプレースホルダー画像に変換する。
これはすべて特定の画面サイズに適していますが、残念ながらウィンドウのサイズ変更を開始した後は別のものになります。
ビューポート単位でフォントや画像を拡大しようとしましたか? HTMLやデモを投稿することもできます。 – sol
http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-containerビューポートが 'js'ソリューションでなければならないコンテナの幅に基づいて応答するfont-size、 fittext.jsのようなものを試してみてください。 – haxxxton