37

私は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/

4

12 に答える 12

34

コンテナを相対的にし、高さも指定する必要があります。これで完了です。

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/

于 2012-05-31T09:33:04.273 に答える
26

上記の解決策はどれもうまくいきませんでした。円形の親コンテナに収まる動的な画像サイズが必要でした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

于 2015-08-24T20:31:59.277 に答える
6

MELISSA PENTA ( https://www.localwisdom.com/ )がこの素晴らしいソリューションを見つけました。

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

于 2016-01-21T14:07:39.947 に答える
2 
<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>

于 2012-05-31T09:42:07.707 に答える
1

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

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

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

デモを試す

私もそれについていくつかの読書をします

于 2012-05-31T09:30:22.820 に答える
1

css background を使用して画像をどのように使用しているかを確認してください background: url(your image path) no-repeat center center; 自動的に画面の中央に配置されます。

于 2012-05-31T11:56:20.483 に答える
0

最近のサイトのこのページ内に Jaap の回答を実装しようとしましたが、1 つの違いがあります。.main {height:} が固定の px 値ではなく auto に設定されていました。レスポンシブ開発者として、画像の高さを左のフローティングテキスト要素と同期させるソリューションを探していますが、テキストの高さが実際の画像の高さよりも大きくなる場合に限ります。その場合、画像を再スケーリングする必要はありませんが、上記の元の質問で説明されているように、トリミングして中央に配置する必要があります。これはできますか？ブラウザーの幅をゆっくりと縮小することで、動作をシミュレートできます。

于 2014-01-13T21:09:13.830 に答える
0

この問題は非常に厄介です..しかし、私はついにそれを手に入れました. 私は多くの複雑なソリューションを見てきました。これは今見るととてもシンプルです。

.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;
}
于 2014-07-24T21:29:36.673 に答える