0

固定サイズのブロック内に任意のサイズの画像を表示する必要があります。画像の角を丸くする必要があります。画像はブロック全体を埋める必要があります。ブロックよりも大きいまたは小さい場合はサイズを変更する必要があり、画像のアスペクト比がブロックのアスペクト比と異なる場合は、画像をトリミングして垂直方向と水平方向の中央に配置する必要があります。

これまでに試しました：

  • CSS border-radiusを使用してブロックの角を丸める-画像はOperaの丸みを帯びた角から表示されます（例）。
  • CSS border-radiusを使用して画像の角を丸める-丸みを帯びた角は、トリミングによって削除されます。
  • CSS border-radius-imageを使用して、画像を背景としてブロックを丸めると、画像のサイズが適切に変更されません。

私は純粋なCSSソリューションを好みますが、JavaScript/jQueryソリューションも高く評価されています。私は、少なくとも最新のブラウザーで機能し、古いブラウザーでは正常に機能が低下するソリューションを探しています（四角い角、画像がブロックから外れないなど）。

4

1 に答える 1

2

私が作ったこのフィドルを試してみませんか？

アイデアはbackground-size: cover;、センタリング、トリミング、そしてカバーを処理するCSSプロパティを使用することです。これがフィドルからの抜粋です：

div.yourWrapper {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: url('some_image.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これがIEでどのようにダウングレードされるかはわかりません。深刻なことに、市場での採用が非常に少ないため、Operaのサポートは間違っています（しかし、それは私の個人的な意見です。今すぐ私に怒鳴り始めることができます）。

于 2012-05-22T11:36:04.200 に答える