191

CSSのみを使用して、div内で特大の画像を中央に配置する方法を整理しようとしています。

流動的なレイアウトを使用しているため、画像コンテナーの幅はページの幅に応じて変化します (div の高さは固定されています)。画像は div 内にあり、値にはボックスシャドウが挿入されているため、ページを通して画像を見ているように見えます。

画像自体は、可能な限り広い値で周囲の div を埋めるようにサイズ変更されています (デザインにはmax-width値があります)。

画像が周囲の div よりも小さい場合は、非常に簡単に実行できます。

margin-left: auto;
margin-right: auto;
display: block;

しかし、画像が div よりも大きい場合は、単純に左端から開始し、中央から右にずれています ( を使用していますoverflow: hidden)。

を割り当てることもできwidth=100%ますが、ブラウザは画像のサイズ変更をお粗末に行い、Web デザインは高品質の画像を中心にしています。

overflow:hidden画像を中央に配置して、両方のエッジを均等に切り取るアイデアはありますか?

4

12 に答える 12

380

このようなことを試してください。これにより、両方のサイズに関係なく、親に対して垂直方向および水平方向の中央に巨大な要素が中央に配置されます。

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}
于 2013-10-16T21:13:56.203 に答える
22

div 内に大きな div を配置し、それを中央に配置し、その div 内の画像を中央に配置します。

これにより、水平方向に中央揃えになります。

HTML:

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

CSS:

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

デモ: http://jsfiddle.net/Guffa/L9BnL/

垂直方向にも中央に配置するには、内側の div にも同じものを使用できますが、画像を完全に内側に配置するには、画像の高さが必要です。

于 2013-01-28T12:54:33.723 に答える
9

ゲームに遅れましたが、この方法は非常に直感的であることがわかりました。 https://codepen.io/adamchenwei/pen/BRNxJr

CSS

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-items: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

HTML

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>
于 2017-04-17T05:31:59.023 に答える
5

私は、画像を div/node の背景にすることの大ファンです。background-position: center属性を使用して、画面サイズに関係なく画像を中央に配置できます。

于 2016-01-29T06:09:22.060 に答える
1

@yunzenのすばらしい答えに基づいています：

このトピックを検索している多くの人は、ホームページなどで大きな画像を「ヒーロー」の背景画像として使用しようとしていると思います。この場合、画像の上にテキストを表示し、モバイル デバイスで適切に縮小することを希望することがよくあります。

このような背景画像に最適な CSS を次に示します (<img>タグで使用します)。

/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;

/* Move to the left by 50% of own width */
transform: translateX(-50%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;
于 2020-06-29T05:01:29.473 に答える
0

幅と高さは一例です。

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

親divの左と上が画面のウィンドウの一番上と左ではない場合、それはうまくいく必要があります。わたしにはできる。

于 2013-01-28T12:56:31.467 に答える