8

imgブラウザのサイズに関係なく、内部をdiv常に中央に配置できるかどうか疑問に思っています。中央に配置するということは、高さを変更せずに画像を中央に配置するために、画像の左側/右側がトリミングされることを意味します。また、ブラウザの幅が画像の幅よりも小さい場合に、水平スクロールバーが表示されないようにすることはできますか？

私の画像がbackground-urlCSSのタグにある場合、これは本当に簡単ですが、この画像はSlidesJSカルーセル内に格納されているため、画像はimgタグからのものである必要があります。

現時点ではmargin:0 auto;、ブラウザの幅が画像よりも大きい限り、画像を中央に配置するために使用していました。ブラウザの幅が縮小すると、ブラウザのサイズが縮小しても画像のサイズは変更されません。また、ブラウザの幅が小さすぎる場合に水平スクロールバーを削除する方法もまだわかりません。

これは私が達成しようとしていることです：http：//imgur.com/Nxh5n

これは、ページレイアウトがどのように見えるかの一例です：http：//imgur.com/r9tYx

私のコードの例：http：//jsfiddle.net/9tRZG/

HTML：

<div id="wrapper">
    <div id="slides">
        <div class="slides_container">
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
        </div>
    </div>
</div>​

CSS：

#wrapper {
    width: 200px;
    margin: 0 auto;
}​
4

3 に答える 3

14

これを試してください：http：//jsfiddle.net/9tRZG/1/

#wrapper {
    max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
    margin: 0 auto;
}
#wrapper img{
    width:100%;       /* the image will now scale down as its parent gets smaller */
}
​

エッジをトリミングするには、次のようにします。http: //jsfiddle.net/9tRZG/2/

#wrapper {
    max-width: 600px; /* so this will scale down when the screen resizes */
    margin: 0 auto;
    overflow:hidden;  /* so that the children are cropped */
    border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}

#wrapper .slides_container{
    width:600px;            /* static width here */
    position:relative;      /* so we can position it relative to its parent */
    left:50%;               /* centering the box */
    margin-left:-300px;     /* centering the box */
}
#wrapper img{
    display:block;          /* this allows us to use the centering margin trick */
    margin: 2px auto;       /* the top/bottom margin isn't necessary here, but the left/right is */
}
于 2012-09-12T22:13:43.197 に答える
3

Jeff Hinesは、ShankarSangoliがこれを実現する方法を説明した中央のページに常に画像を配置することをリンクしました。

img.centered {
     position:fixed;
     left: 50%;
     top:  50%;
     /*
         if, for instance, the image is 64x64 pixels,
         then "move" it half its width/height to the
         top/left by using negative margins
     */
     margin-left: -32px;
     margin-top:  -32px;
 }
于 2012-09-12T22:25:22.593 に答える
1

スクロールバーに関しては、位置合わせの中心が適切に見えるかどうかわかりません。以下を使用できます。

overflow-x: hidden;
于 2012-09-12T22:11:22.163 に答える