7

imgに設定されている親divタグの中央に配置するにはどうすればよいですかoverflow: hidden。つまり、私が望むのは、画像をクリップすることですが、画像の中央が表示されるように左右の両方をクリップすることです。

<div class='wrapper'>
  <img/>
</div>

次に、次のようなスタイルを設定します。

.wrapper {
  position: absolute;
  /* position details here */
  overflow: hidden;
}
.wrapper img {
  height: 100%;
  margin-left: -??; //what here?
}

-50%親の幅になりますが、img 自体の幅が必要です。

Firefox がサポートする CSS は許容されます。

4

3 に答える 3

13

http://codepen.io/gcyrillus/pen/BdtEj

text-align 、 line-height 、 vertical-align 、および負のマージンを使用します。img は実質的にゼロになり、それ自体が中央に配置されます。

.wrapper {
  width:300px;
  text-align:center;
  line-height:300px;
  height:300px;
  border:solid;
  margin:2em auto;
  overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;

  /* to show whats been cut off */
  position:relative;
  z-index:-1;
}

水平のみ:

  .wrapper {
      width:300px;
      text-align:center;
      border:solid;
      margin:2em auto;
      overflow:hidden
    }
    img {
      margin:0 -100%;
      vertical-align:middle;
    }
于 2013-06-27T08:01:48.830 に答える
1

追加してみる

display:block;
margin:0px auto;

「.wrapper img」へ

于 2013-06-27T08:01:18.670 に答える
1

こんにちは、例を確認してください

それはあなたの問題を解決します

HTML

<div class='wrapper'>
    <img  border="3"/>
</div>

CSS

.wrapper {
   /*position: absolute;*/
   /* position details here */
   overflow: hidden;
   text-align:center
}
.wrapper img {
  height: 100%;
}
于 2013-06-27T08:01:42.970 に答える