3

一連の div 要素を使用して、一連のクライアント ロゴを表示しています。背景画像を使用する理由は、img 要素を使用したよりハックなソリューションではなく、画像を div 内で垂直方向および水平方向の中央に配置できるようにするためでした。

問題:流動的でレスポンシブなグリッドを使用しているため、ブラウザーが最大幅 (1000px) を下回ると、div 要素が縮小し始めます。これにより、一部のクライアント ロゴ (背景画像) が端で切り取られます。これは与えられたものです。親要素の端にヒットすると、これらの画像が縮小され始めます。

background-size: include はこれを部分的に解決します。唯一の欠点は、背景画像のサイズが 100% を超えて拡大されることです。これは問題です。ロゴが伸びますが、これは私にとっては良い解決策ではありません。

また、background-size を使用せずに、クライアント ロゴに最大幅を設定することもできます。ただし、これにより、クライアント リストがレスポンシブ レイアウトの余分な行に移動します。これを避けたいのですが、私にとってこれが唯一の有効な解決策です。

そうは言っても、スケールアップせずに背景サイズを利用する方法はありますか? または、これにアプローチして、画像をボックス内の中央に保つ別の方法はありますか?

コードを簡単に見てみましょう。

HTML

<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>

CSS

.clientlist .client { width: 20%; height: 90px; float: left; } /* Five clients a row */
.clientlist .client div { 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; } /* Vertically centers background images */
.clientlist .client .bcs { background-image: url(../images/client-bcs.jpg); } /* bunch more like this to define image */
4

2 に答える 2

1

これはまだ可能ではないようです。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntaxの構文例に基づいて、「background-size: auto,自動、含む;" しかし、Chrome、FF、および IE での最初のテストでは、そのようにはなりませんでした。それらはすべてSVGでうまくいくようです。Chrome と IE は PNG で失敗します。それらはすべてGIFで失敗します。

私には、私たちが探しているこの動作がhttp://www.w3.org/TR/css3-background/#the-background-sizeでかなり明確に綴られているようです:

両方の値が 'auto' の場合、画像の固有の幅および/または高さを使用する必要があります。画像が固有の幅も固有の高さも持たない場合、そのサイズは 'contain' として決定されます。

ただし、そのようには再生されないため、何かが欠けている可能性があります。

于 2015-06-17T18:49:21.870 に答える
0

これはあなたが求めているものだと思います

デモ

HTMLは

<div class="clientlist">
<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>
<div class="client"><div class="client4"></div></div>
<div class="client"><div class="client5"></div></div>
  <div class="push"></div>
</div>

そしてCSSは

body, html {
    height: 100%;
}

.clientlist {
    text-align: justify;
    display: inline-block;
    width: 100%;
}

.clientlist .client { 
    width: 18%; 
    height: 90px; 
    max-width: 200px;
    display: inline-block;
}

.clientlist .client div { 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain;
} 

.push {
    display: inline-block;
    width: 100%;
    height: 0px;
}
    
.client1 { background-image: url(http://placekitten.com/200/300); }
.client2 { background-image: url(http://placekitten.com/200/200); } 
.client3 { background-image: url(http://placekitten.com/200/180); } 
.client4 { background-image: url(http://placekitten.com/220/200); } 
.client5 { background-image: url(http://placekitten.com/180/200); }

div に最大幅を設定していますが、実際には背景サイズには設定していません。しかし、結果は意図したものだと思います。div スペースを均等にするために、text-align: justify を使用するトリックを使用します。これが機能するために; 「プッシュ」クラスである HTML に追加の要素が必要です。

于 2013-08-01T16:44:39.193 に答える