0 
 <div >
        <img  src="some url"  />
 </div>

div の高さと幅は変化し続けます。この画像を右に揃えて配置し、垂直方向に中央に配置したいと思います。画像の高さと幅は固定です。それを動的に解決する方法は？場合によっては、div の幅と高さが img の幅と高さと同じになることがあります。または、div の幅と高さが img の幅と高さよりも大きい...

4

5 に答える 5

2

あなたのcssでこのコードを試してください、

    float:right;
    margin-top:25%;

ここで完全なコードと例を見ることができます。http://jsfiddle.net/VzLjq/

幸運を ！

于 2013-01-14T11:15:43.157 に答える
0

css を使用してみてください。

#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;}
#content img.alignright {float:right; margin:5px 0 5px 15px;}
#content img.aligncenter {display:block; margin:10px auto;}
#content img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

そしてあなたのhtml

<img class="alignright" src="img/test.jpg" height="225" width="300"
alt="Example content image using the class .alignright" />

要件に従ってこれらのcss テンプレートを使用してみてください。

于 2013-01-14T11:17:11.300 に答える
0

これにはdisplay:tableを使用できます。次のように書きます。

HTML

<div class="parent">
  <div class="child">
    <img  src="http://dummyimage.com/200x200/000/fff&text=image"  />
  </div>
</div>

CSS

.parent{
  height:400px;
  border:1px solid red;
  text-align:right;
  display:table;
  width:100%;
}
.parent .child{
  display:table-cell;
  vertical-align:middle;
  width:100%;
  height:100%;
}

これをチェックしてくださいhttp://jsfiddle.net/qEYuD/

IE8以降まで動作します。

于 2013-01-14T11:23:39.477 に答える
0

これを試してみてください。この場合に役立つと思います：

div{
  position: relative;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
}
于 2013-01-14T11:10:45.747 に答える
0

画像が静的な場合は、相対位置と負のマージンを使用できます。

http://jsfiddle.net/qEYuD/3/

.parent{
  height:400px;
  border:1px solid red;
  text-align: right;
}

.parent img {
  position: relative;
  top: 50%;
  margin-top: -100px; /* half the height of the image */
}

画像とコンテナーの両方のサイズが不明な場合、Flexbox は最小限のマークアップでそれを行うことができます。

http://jsfiddle.net/qEYuD/4/ (プレフィックスは含まれていません)

.parent{
  height:400px;
  border:1px solid red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

Flexbox の欠点は、ブラウザーのサポートがまだ十分でないことです。IE10 はそれをサポートする最初の IE バージョンであり、Firefox は現在の仕様に従うようにサポートを更新しています。

于 2013-01-14T13:52:56.740 に答える