0

柔軟なレイアウト

フォーカスは CSS3 アイコンにあります。上の画像はブラウザ幅480pxの場合です。下2枚の画像は200px時のものです。右下の画像はまさに私が達成したいもので、以下の条件にまとめられています。

  1. 画像の歪みは一切ありません。(これは、オペラ アイコンで使用されている方法を失格とします。)
  2. 画像の中心は、コンテナー幅の特定の % でなければなりません。画像の場合、その % は正確に 50% ですが、アニメーション化する必要があるため、他の値である可能性があります。

幅と高さが 0 の div でイメージをラップし、上部と左側を 50% に配置することによってのみ、右下の効果を実現できました。次に、内部の画像が -60px (120px は画像の幅と高さ) で左上に配置されます。

それほど複雑ではない「業界標準」の方法はありますか？

また、使用している画像はスプライトなので、それが複雑になるかどうかはわかりません。画像は、他のスプライトを非表示にするために、overflow: hidden を含む div タグによって既にラップされています。

4

2 に答える 2

0

コンテナを使用する必要はありません。CSS3 アイコンにclass="css3icon". 単に使用します：

.css3icon{
    left:50%;
    margin-left:-60px; /* (half the width of the icon) */
    display:block; /* You should already have this one.. */
}

これがスプライトであるという事実は違いを生みません..

も使用できます:margin: 0 auto;ただし、アニメーション化する場合は、最初のソリューションを使用することをお勧めします。

于 2013-07-11T19:49:52.867 に答える
0

あなたが求めていることを理解していれば、応答性のある中央の画像が必要です。スプライトを使用しているため、これは機能しないと思いますが、これは通常の画像に対して行うことです。

//to center the image
#container {
    //the width can be different but then you'll have to center the container
    width:100%; 
    text-align:center;
}

#container img {
    display:inline-block;
    //following code makes image resize with browser
    max-width:100%;
    //set this to the smallest size you want to the image to display
    min-width:150px; 
}
于 2013-07-11T19:58:24.917 に答える