web-dev-qa-db-ja.com

オーバーフローが隠されたdivの中央の画像

400pxの画像とそれより小さいdivがあります（この例のように幅は常に300pxとは限りません）。画像をdivの中央に配置し、オーバーフローがある場合は非表示にします。

注：画像にposition:absoluteを保持する必要があります。私はcss-transitionsを使用しています。position:relativeを使用すると、画像が少し揺れます（ https://web.archive.org/web/20120528225923/http://ta6.maxplus .be：8888 / ）。

jsfiddle http://jsfiddle.net/wjw83/1/

htmlcsscenter
27
Puyol

コンテナを相対的なものにし、高さも指定する必要があります。

http://jsfiddle.net/jaap/wjw83/4/

.main {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 200px;
}

img.absolute {
  left: 50%;
  margin-left: -200px;
  position: absolute;
}
<div class="main">
  <img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />

必要に応じて、負のマージンと上部の位置を追加して、画像を垂直方向に中央に配置することもできます。 http://jsfiddle.net/jaap/wjw83/5/

25
Jaap

上記のソリューションはどれも私にとってうまくいきませんでした。 overflow:hiddenで円形の親コンテナに収まるように動的な画像サイズが必要でした

.circle-container {
    width:100px;
    height:100px;
    text-align:center;
    border-radius:50%;
    overflow:hidden;
}

.circle-img img {
  min-width:100px;
  max-width:none;
  height:100px;
  margin:0 -100%;
}

ここでの作業例： http://codepen.io/simgooder/pen/yNmXer

21
Simon G

この素敵なものを見つけました solution by MELISSA PENTA

HTML

<div class="wrapper">
   <img src="image.jpg" />
</div>

CSS

div.wrapper {
  height:200px;
  line-height:200px;
  overflow:hidden;
  text-align:center;
  width:200px;
}
div.wrapper img {
  margin:-100%;
}

divの任意のサイズの画像を中央揃え
丸いラッパーと異なるサイズの画像で使用されます。

CSS

.item-image {
    border: 5px solid #ccc;
    border-radius: 100%;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.item-image img {
    height: 200px;    
    margin: -100%;
    max-width: none;
    width: auto;    
}

ここでの作業例 codepen

6
Egle Kreivyte
<html>
<head>
<style type="text/css">
    .div-main{
        height:200px;
        width:200px;
        overflow: hidden;
        background:url(img.jpg) no-repeat center center
    }
</style>
</head>
<body>
    <div class="div-main">  
    </div>
</body>
2
Elham

あなたはそれを隠すために側面からあなたのイメージを組み込む必要がありますこれを試してください

フェイク画像のトリミングのための3つの簡単で高速なCSSテクニック| Css ...

上記のサイトでの最初の方法のデモの1つ

デモを試す

私もそれを読んでいます

1
shareef

css背景を通して画像をどのように使用しているのかを確認してください。背景のような背景画像の位置を使用してください。自動的に中央に画面を揃えます。

1
Gopikrishna

これは、ラッパーdivの左端に基づいたアイデアと少しの計算を使用して、このサイトで機能するようです。 50％を残してから50％の余白を取り去ることは冗長に思えますが、うまくいくようです。

div.ImgWrapper {
    width: 160px;
    height: 160px
    overflow: hidden;
    text-align: center;
}

img.CropCenter {
    left: 50%;
    margin-left: -100%;
    position: relative;
    width: auto !important;
    height: 160px !important;
}

<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
1
dhaupin

私は最近のサイトの このページ の中にJaapの答えを実装しようとしましたが、1つの違いがあります。レスポンシブデベロッパーとして、画像の高さを左のフローティングテキスト要素と同期させるソリューションを探していますが、テキストの高さが実際の画像の高さより大きくなった場合にのみです。その場合、画像は再スケーリングされるべきではなく、上記の元の質問で説明されているように切り取られて中央に置かれるべきです。これはできますか？ブラウザの幅をゆっくりと縮小することにより、動作をシミュレートできます。

0
makani photography

最新のソリューション：

HTML

<div class="parent">
    <img src="image.jpg" height="600" width="600"/>
</div>

CSS

.parent {
    width: 200px;
    height: 200px;
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}
0
GilCarvalhoDev

この問題はa ..での大きな痛みですが、ようやくわかりました。私は多くの複雑なソリューションを見てきました。これは非常に単純なので、私はそれを見ています。

.parent {
  width:70px;
  height:70px;
}

.child {
  height:100%;
  width:10000px; /* Or some other impossibly large number */
  margin-left: -4965px; /* -1*((child width-parent width)/2) */
}

.child img {
  display:block; /* won't work without this */
  height:100%;
  margin:0 auto;
}
0
pac

私にとって、フレックスボックスは画像を中央に配置するのに最適でした。

これは私のHTMLコードです：

<div class="img-wrapper">
  <img src="..." >
</div>

そして、私はCSSに使用しました：私はラッパー要素と同じ幅の画像が必要でしたが、高さがラッパー要素の高さよりも大きい場合は、「トリミング」/表示されません。

.img-wrapper{
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
img {
  height: auto;
  width: 100%;
}
0
lisa-bob