1

周囲のdiv内で画像を中央に配置したいと思います。この画像は強制的なサイズである必要がありますが、引き伸ばされていません。したがって、divコンテナが100px * 100pxで、画像が200px * 200pxの場合、両側で50pxをトリミングする必要があります。

この質問では、サイズを強制する方法を読むことができます。ただし、画像を左下から開始するのではなく、中央に配置します。これが質問です:)

これがその方法です。

ここに画像の説明を入力してください

そして、これが私が望む方法です：

ここに画像の説明を入力してください

4

3 に答える 3

3

画像に負の左マージンを与えます。この例では、margin-left:-50px。

編集：または、画像の幅がわからない場合は、画像をdivの背景として使用できます。

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black;
  background:url(yourimagehere) 50% 0 no-repeat">
</div>
于 2012-01-04T13:21:44.643 に答える
0

これはあなたが必要とするものかもしれませんか？

于 2012-01-04T13:15:44.930 に答える
0

これは、コンテナの向きが画像の向き（ポートレート/風景）と一致しない場合でも機能します。そして、画像サイズがターゲットコンテナの最大10倍であれば機能することzoom(0.1)をmin-width/height:1000%意味します。どこかに線を引く必要があると思います：（http://jsfiddle.net/FYnCG/）。アニメーションビットはテストにすぎないので、高さが制限要因になったときにどのようにスケーリングするかを確認できます。

<DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100px;
  height: 30px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
  transititon: width 5s, height 8s;
}
.container img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
.container:hover {
  width: 800px;
  height: 800px;
  transition: width 5s, height 8s;
}
</style>
</head>
<body>
  <div class="container">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
</body>
</html>
于 2014-05-25T18:11:55.480 に答える