2

曲線の境界線を持つ div 内に画像をレンダリングしようとしていました。両方の境界線の半径と寸法が同じであるにも関わらず、画像が div を完全に埋めないという問題が発生しています。

出力

div内の画像をレンダリングする方法は次のとおりです

<div className={"container"}>
    <img
      alt={"thumb"}
      className={"img"}
      src={
        "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/300px-Gull_portrait_ca_usa.jpg"
      }
    />
  </div>

そしてここにcssクラスがあります

.container {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  border: 1px solid grey;
}

.img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
}

ライブコードサンドボックス環境 リンクへのリンクは次のとおりです

4

5 に答える 5

-1

境界線の外径と画像の外径を比較しています。境界線の内側の半径と画像の外側の半径のみが同じである必要があります。

ボーダーの外径 = 8px

ボーダーの内側の半径 = 画像の外側の半径 = 8px - ボーダーの幅 = 7px

それは完璧に出てきました。

ここに画像の説明を入力

.container {
  height: 320px;
  width: 320px;
  border-radius: 50px;
  border: 10px solid grey;
}

.img {
  height: 320px;
  width: 320px;
  border-radius:40px;
}
于 2021-07-06T17:15:20.023 に答える