2

ユーザーのGravatar画像に境界線の半径を追加し、クロムとサファリの拡張機能に正しいCSSを追加したことを確認しましたが、画像が円全体を完全に埋めることはできません。ただし、Firefoxでは正しく表示されます。これが私のCSSと問題のいくつかの画像です。

.gravatar{float: left; text-align: center; 
margin-top:1px; border:2px solid white;background-color:#ffffff;-webkit-border-radius:55%;-moz-border-radius:55%;border-radius:55%;box-shadow:0 0 10px rgba(0,0,0,0.3);
height: 38px;
width: 38px;
}

ここに画像の説明を入力してください ここに画像の説明を入力してください

CSSでのGravatarに関する他の唯一の言及は

.gravatar {
    padding: 0px;
    display: inline;

}

私のBootstrap.min.cssで

PHPでGravatarからの画像を呼び出しています

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

あなたが持っている解決策をありがとう。

4

2 に答える 2

3

私が言えることは、画像が境界線の半径を埋めていないという問題ではなく、ブラウザーが境界線をレンダリングする方法の 1 つです。ボーダーの色を画像とは違う色に変更すると、実際にChromeで描画すると画像の下にボーダーが描画されることがわかります。潜在的な修正は、画像を div で囲み、その div に境界線を配置することです。

私は 16x16 の画像を使用し、あなたが行ったのと同じ種類の結果を得ました...最初は。div でラップすると、問題はなくなります。

.gravatar
{
    float: left; 
    text-align: center; 
    margin-top: 1px; 
    background-color: #ffffff;
    -webkit-border-radius:55%;
    -moz-border-radius:55%;
    border-radius:55%;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
    height: 38px;
    width: 38px;
}
.gravWrap
{
    display:inline-block;
    border-radius: 55%;
    border: solid 2px blue;
}

<div class='gravWrap'><img class='gravatar' src='img/rss16.png'/></div>

編集:次のようにマークアップを出力できます。

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><div class='gravWrap'><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?></div> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>
于 2012-10-29T18:18:18.433 に答える
2

imgタグを でラップし、代わりにspanそれらのスタイルをそれに適用することができますspan。次に、 and を追加するoverflow: hiddenと、WebKit で機能するはずです。

http://jsfiddle.net/Kg4Z3/1/

PHP コード:

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><span class="gravatar-wrapper"><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?></span> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

そしてCSS：

.gravatar-wrapper {
    background-color: #fff;
    border: 2px solid #fff;
    -webkit-border-radius: 55%;
    -moz-border-radius: 55%;
    border-radius: 55%;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    float: left;
    height: 38px;
    margin-top: 1px;
    overflow: hidden;
    text-align: center;
    width: 38px;
}​
于 2012-10-29T18:16:50.687 に答える