0

使用事例

ユーザーがアップロードした写真を、角が丸い正方形のボックスに表示します。画像の縦横比は横になりますが、コンテナ内に収まるように正方形に切り取る必要があります。写真の右側のみを表示することにしました (写真の左側は見えなくなります)。

次のことを前提とします

  • 写真を前処理できません。CSS のみのソリューションを探しています
  • 必要なスペースに収まるように写真を拡大/縮小できます
  • 写真は元の縦横比を維持する必要があります (サイズに合わせて引き伸ばすことはできません)。

サンプルコード

デモンストレーションについては、このフィドルを参照してください http://jsfiddle.net/rrbZg/

<style>
.croppedPhoto {
    margin: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.croppedPhoto img {
    height: 200px;
    position: absolute;
    right: 0;
}
</style>
<div class="croppedPhoto">
  <img src="/some/random/photobucket/url">
</div>

問題

Chrome と Safari では画像の角が直角で、丸みを帯びた角はまったく表示されません。

考えられる原因

Webkit は、コンテナーの角を丸くすることのみを許可し、角を丸くすることを子に適用したり、それらをトリミングしたりしないようです。これは、オーバーフローが非表示に設定されている要素に適用されます。

機能しないもの

画像自体に角を丸く設定してみてください。しかし、これは私の場合は機能しません。これは、右側に角が丸く、左側に角が直角になるだけだからです。

次のフィドルを参照してください: http://jsfiddle.net/VF6m3/

4

1 に答える 1

0

これは簡単な回避策に関する既知の問題です - イメージを背景として設定し、コンテナーの境界線の半径を設定します。

http://jsfiddle.net/VF6m3/1/

于 2012-06-18T22:39:28.073 に答える