0

この画像をフレームの中央に配置したいのですが、下の図を参照してください。

ここに画像の説明を入力

フレームの外側にあるものを見ることができないように、オーバーフローを隠して使用します。これはcssのみで行う必要があります-スクリプトはまったくありません。スクリプトを許可しないサードパーティのソフトウェアで使用されているためです。これに加えて、画像のサイズを変更できる必要があるため、画像タグとして指定する必要があります。含まれている必要がある要素については、フィドルを参照してください。最後に大事なことを言い忘れましたが、最大でcss 2.1でなければなりません（css3はありません）！

これがフレームのフィドルです

そしてHTML：

<div class="frame">
    <img src="http://preview.fonqi.com/img/explain2.jpg" width="200" />
</div>

CSS:

.frame{
   width:200px;
   height:200px;
   border:2px solid black;
   overflow:hidden;
}
4

2 に答える 2

3 
.frame img { margin-top: -50%; }

画像を半分の長さだけ上に移動します。

デモ

ポジショニングを使用することもできます....

.frame img { position: relative; top: -50%; }

デモ

于 2013-02-06T14:12:43.380 に答える
0

以下を試してください

この行をCSSimg{ margin: -100px 0px;}に追加すると機能します

更新されたフィドル: http://jsfiddle.net/QxygK/13/

于 2013-02-06T14:21:24.183 に答える