13

だから私は自分の体にパーセンテージ幅のdivを持ち、その中に次のようにインラインスタイルのdivを持っています:

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

ご覧のとおりtext-align: center;、画像が に対して十分小さい場合、画像をdiv中央に配置します。divしかし、 1280x800 の画面では、幅のパーセンテージが十分に大きくなることは間違いありません。

負のマージンは、親のパディングを克服するためのものdivです。overflow:hidden乱雑ではなく、私が望むように物事を見せます。つまり、 onenaught.comのヘッダー画像のように、私が望むように機能しています。ブラウザの幅を広げると右側に表示されやすくなりますが、中央に配置されていないため、両側から拡大することはできません。

それで、画像を中央に配置する方法があるのだろうかと思います。何か知っていますか？

編集:ここのページ.

4

5 に答える 5

33

画像のmargin-leftとを に設定することで、実際にこれを行うことができます。margin-right-100%

これは、jsFiddleこれを示すものです。（代わりに以下のものを使用してください。より良いです）

margin-left画像のとmargin-rightをはるかに大きな負の数に設定することをお勧めします。たとえば-9999%、-100%値と同様に、divを含む要素の幅がの幅div:

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

オーバーフローを表示に切り替え、結果ウィンドウのサイズを の幅jsFiddle未満に変更することで、これと前の動作の違いを確認できます。300%div

サポートされているブラウザーの範囲について @MaxOriola を引用する (コメントから):

Firefox、Chrome、Safari (最新バージョン)、および Explorer 8、9、10 で 2 番目のフィドルを再テストしました。それらすべてで正常に動作します。

注:画像要素を表示inlineするか、 (ラッパー要素上で)inline-block水平方向に中央揃えにする必要があります。text-align: center

// ALL of the JS below is for demonstration purposes only

$(document).ready(function() {
  $('a').click(function() {
    $('body > div').toggleClass('overflow');
  });
})
img {
  margin: 0 -9999% 0 -9999%;
}


/* ALL of the CSS below is for demonstration purposes only */

body {
  text-align: center;
  font-family: verdana;
  font-size: 10pt;
  line-height: 20pt;
}

body>div {
  margin: 0px auto;
  width: 40%;
  background-color: lightblue;
  overflow: hidden;
}

img {
  vertical-align: top;
}

.overflow {
  overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>40% wide div [<a href="#">toggle overflow</a>]
  <div>
    <img src="http://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>

于 2013-05-20T04:55:38.510 に答える
27

1つのオプションは、画像を絶対に配置してleft: 50%から、画像の幅の半分に等しい負のマージン左を使用することです。もちろん、これにはdiv、画像を絶対的に配置するための適切なコンテナー タイプを提供するために、コンテナーの配置を相対または絶対に設定する必要があります。

もう 1 つのオプション (そしておそらくより良い方法) は、画像タグを使用する代わりに、画像を親 div の背景として設定し、背景の配置 CSS 属性を使用して中央に配置することです。これにより、絶対配置を強制せずに中央に配置されるだけでなく、オーバーフローが自動的にトリミングされるため、overflow 属性は必要ありません。

于 2009-08-27T22:53:57.123 に答える
5

css を使用して、幅が設定されtransformたコンテナ内の画像に:overflow: hidden

img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block; /* optional */
}

jsFiddle here (Mathijs Flietstra の jsFiddle の一部をお借りしました。ありがとうございます)。

于 2016-04-04T08:36:30.233 に答える
2

私は別の解決策を見つけました

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-100%; 
        width:300%;
     }
     .image{
        width: 800px; //your image size 
     }           
</style>

そして体内で

<div class="container">
   <div class="containerSecond">
       <image src="..." class="" />
   </div>
</div>

これにより、コンテナーが大きくなったり小さくなったりするたびに、画像が中央に配置されます。この場合、画像はコンテナの 300% よりも大きくなければ中央に配置されませんが、その場合、containerSecond を使用して大きくすることができ、機能します。

于 2013-08-03T08:51:57.187 に答える
2

画像を背景として使用することを検討してください;）

background-position を使用して、必要なものを取得します。

クロスブラウザーで一貫した結果を得るには、javascript ソリューションが必要になる場合があります

于 2009-08-27T22:54:57.327 に答える