全体の幅と高さに合わせてイメージを調整する方法は？

スプライトが100％幅のコンテナの全幅を占めていないという問題がありますか？明らかに私のイメージスプライトのイメージは異なるサイズを持っていますが、コンテナの幅に合った画像参照を作成することはできませんし、コンテンツとしてその奇妙な空白がありますか？全体の幅と高さに合わせてイメージを調整する方法は？

私はそれらを同じサイズにすると問題は解決しますが、イメージスプライトで行う必要があると思いますか？

は、ここで私はすぐに描いた一例だ、これは私のfiddleと

html, 
body { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
} 
.slider { 
width: 600px; 
height: 400px; 
margin: 0 auto; 
border: solid; 
} 
/* demo test purpose*/ 
.slider>div {/* see me */ 
box-shadow:0 0 0 1px ; 
} 
.slider #img1 { 
    background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 0; 
    background-size: cover; 
    width: 600px; 
    height:400px; 
    } 
.slider #img2 { 
background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 25.026%; 
background-size: cover; 
width: 100%; 
height:100%; 
} 
.slider #img3 { 
background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 12.87%; 
background-size: cover; 
width: 100%; 
height:100%; 
} 
.slider #img4 { 
background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 33.65%; 
background-size: cover; 
width: 100%; 
height:100%; 
}

出典

2016-07-21 learningjavascriptks

まあで開始する、スプライトの画像は、それぞれ同じ大きさにする必要があります。彼らはまた、少なくとも親コンテナと同じ大きさである必要があります。 Googleで見つけたランダムなスプライトを使用して、それがどのように行われたかの例を示すことはできますか？ – zsawaf

はい、どうぞ。私は本当に感謝しています。もしそれが仕事をするならば。私はあなたの答えを受け入れるだろう – learningjavascriptks

それは、スプライトは非常に具体的である必要があります。私は答えを投稿します。 – zsawaf

の100vwされます。正直なところ、あなたのコードではありませんでした。あなたはスプライトシートを使用していました。スプライトシートを作成するときは、すべての画像が同じ次元であることを確認してください。画像要素の寸法をスプライトの画像と同じに設定します（ピクセルで幅と高さを指定する必要があります）。それは本当にそこにあるすべてです。

これが役に立ちます。

.slider { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    list-style: none; 
 
    background-color: #eee; 
 
} 
 

 
.slide { 
 
    width: 100px; 
 
    height: 200px; 
 
    background-size: 1022px 755px !important; 
 
    border: 1px solid black; 
 
} 
 

 
.slider .slide:nth-child(1) { 
 
    background: url('http://orig11.deviantart.net/1e13/f/2014/314/b/a/high_quality_paper_mario_sprites_by_fawfulthegreat64-d860r1v.png'); 
 
} 
 

 
.slider .slide:nth-child(2) { 
 
    background: url('http://orig11.deviantart.net/1e13/f/2014/314/b/a/high_quality_paper_mario_sprites_by_fawfulthegreat64-d860r1v.png'); 
 
    background-position: 246px 0; 
 
} 
 
.slider .slide:nth-child(3) { 
 
    background: url('http://orig11.deviantart.net/1e13/f/2014/314/b/a/high_quality_paper_mario_sprites_by_fawfulthegreat64-d860r1v.png'); 
 
    background-position: 365px 0; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <ul class="slider"> 
 
     <li class="slide"></li> 
 
     <li class="slide"></li> 
 
     <li class="slide"></li> 
 
    </ul> 
 
    </body> 
 
</html>

出典

2016-07-21 17:43:39 zsawaf

私のコード試し100vh、代わりに100% :)

出典

2016-07-21 17:15:11

バイブルは非常に高く評価されるでしょう。それは私の上で動作しません。私は彼らが国境に完全に収まるようにしたいだけです – learningjavascriptks

は[this]（https://jsfiddle.net/9fhmfog0/4/）です。 :) –

はい、右側にまだ空白があります。 – learningjavascriptks

全体の幅と高さに合わせてイメージを調整する方法は？

答えて

関連する問題