0

私はCSSで次のhtmlを持っています

.image_with_loader_container {
  position: relative;
  width: 100%;
  padding-bottom: 139.34426%;
  background: #dbdbdb;
}

.image_with_loader_container img {
  border-radius: 4.75%/3.5%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class="image_with_loader_container">
  <img src="..." />
</div>

このビデオ(Chrome 83) では、border-radius がうまく機能していないことがわかります。この動作はhttps://mtgprint.cardtrader.comでライブで確認できます。

この問題を解決するためのアイデアはありますか?

4

1 に答える 1

1

画像に丸みを帯びた角を追加していますが、コンテナーbackground: #dbdbdb;はまだ長方形です。(半径を 100% などの大きな値に設定すると、よりよく表示されます)。その背景を削除するか、同じ境界半径を に追加してみてください.image_with_loader_container。

于 2020-06-19T22:23:57.837 に答える