（スプライトの）大きな画像を小さなdivに収めるように強制しますか？

Question

2つの小さな画像（515px-515px）を含むサイズ1030px-510pxの大きな画像（画像スプライト）があります。
スプライトから2つの小さな画像を取得し、2つの<img>タグの背景を設定したいと思います。

.img-1, .img-2 { 
 
    width: 515px; 
 
    height: 515px; 
 
    background: url(http://i.stack.imgur.com/aozNS.png) no-repeat; 
 
} 
 

 
.img-1 { 
 
    background-position: 0px 0px; 
 
} 
 

 
.img-2 { 
 
    background-position: -515px 0px; \t 
 
}

<div class="col-sm-6"> 
 
    <img class="img-1"> 
 
</div> 
 
<div class="col-sm-6"> 
 
    <img class="img-2"> 
 
</div>

しかし、私の2つのdiv（クラスは= "COL-SM-6"）よりも大きな二つの画像：私はこのコードを使用しています。では、2つの小さな画像を2つのdivに収める方法はありますか？
2つのdivをより大きく（class = "col-sm-7"）に変更したくありません。

Answer 1

あなたは（2つのイメージに対して）background-size 200％に設定する必要があり、かつパーセントでbackground-positionを指定：画像上の画素の特定の幅と高さを設定

.img-1, .img-2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: url(http://i.stack.imgur.com/aozNS.png) no-repeat; 
 
    background-size: 200%; 
 
} 
 

 
.img-1 { 
 
    background-position: 0 0; 
 
} 
 

 
.img-2 { 
 
    background-position: 100% 0; \t 
 
}

<div class="col-sm-6"> 
 
    <img class="img-1"> 
 
</div> 
 
<div class="col-sm-6"> 
 
    <img class="img-2"> 
 
</div>

Answer 2

を行います彼らはその正確な空間を占めています。ブートストラップ・コラムは反応して、指定されたcol番号（例col-6またはcol-4）に基づいてスペースに合わせてサイズを調整します。

私があなたの質問を正しく理解していれば、画像上に512pxの幅と高さのCSSプロパティを削除し、幅：100％を使用する必要があるという問題があります。画像はコンテナに合わせて幅が調整され、高さは幅に合わせて調整されます。

[編集] - cssのバックグラウンドプロパティを使用していないsrcでロードされたイメージの場合にのみ気にしてください。代わりにそのことを検討することをお勧めします。あなたが絶対このようにしなければならない場合は、他の答えのように小さな固定サイズに留まるか、flexboxのようなものを使って画像をサイズに適応させてみてください。