Wie wird das Bild an die gesamte Breite und Höhe angepasst?

Ich habe ein Problem damit, dass meine Sprites nicht die gesamte Breite für meinen Container mit 100% Breite einnehmen? Offensichtlich haben die Bilder auf meinen Bild-Sprites unterschiedliche Größen, aber ich kann keinen Bild-Bezug auf die Breite des Containers anpassen, und da ist dieser komische weiße Raum als Inhalt?Wie wird das Bild an die gesamte Breite und Höhe angepasst?

ich denke, sie die gleiche Größe machen wird das Problem beheben, aber muss ich das mit Bild Sprites tun?

dies ist mein fiddle und meinen Code

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%; 
}

Quelle

2016-07-21 learningjavascriptks

Nun, mit zu beginnen, Bilder im Sprite müssen jeweils die gleiche Dimension sein. Sie müssen auch mindestens so groß wie der Elterncontainer sein. Kann ich ein zufälliges Sprite verwenden, das ich bei Google finde, und Ihnen ein Beispiel zeigen, wie es gemacht wird? – zsawaf

ja, bitte. Ich würde es sehr schätzen. Wenn es die Aufgabe erledigt. Ich würde deine Antwort akzeptieren – learningjavascriptks

Es wird, Sprites müssen sehr spezifisch sein. Ich werde eine Antwort posten. – zsawaf

Hier ist ein Beispiel, das ich zog schnell. Ehrlich, es war nicht dein Code, du benutztest nur ein schlechtes Sprite-Blatt. Stellen Sie beim Erstellen eines Sprite-Blatts sicher, dass alle Bilder die exakt gleiche Größe haben. Stellen Sie die Abmessungen des Bildelements so ein, dass sie dem Bild im Sprite entsprechen (Sie müssen Breite und Höhe mit Pixeln angeben). Das ist wirklich alles, was dazu gehört.

Hoffe, das hilft.

.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>

Quelle

2016-07-21 17:43:39 zsawaf

Versuchen 100vh und 100vw anstelle des 100% :)

Quelle

2016-07-21 17:15:11

eine Geige würde sehr geschätzt werden. es funktioniert nicht bei mir. Ich möchte nur, dass sie perfekt an die Grenzen passen – learningjavascriptks

ist [das] (https://jsfiddle.net/9fhmfog0/4/) was meinst du? :) –

ja, aber es ist immer noch Leerraum auf der rechten Seite. – learningjavascriptks

Wie wird das Bild an die gesamte Breite und Höhe angepasst?

Antwort

Verwandte Themen