Как настроить изображение в соответствии с шириной и высотой?

У меня проблема с моими спрайтами, не занимающими всю ширину моего контейнера со 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

Вот пример, который я быстро нарисовал вверх. Честно говоря, это был не ваш код, вы просто использовали плохой лист спрайтов. При создании листа спрайтов убедитесь, что все изображения являются точно такими же размерами. Установите размеры элемента изображения так же, как изображение в спрайте (вам нужно указать ширину и высоту с пикселями). Это действительно все, что нужно.

Надеюсь, это поможет.

.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 и 100vw вместо 100% :)

источник

2016-07-21 17:15:11

скрипт был бы очень признателен. это не работает на меня. Я только хочу, чтобы они идеально поместились на границах. – learningjavascriptks

это [это] (https://jsfiddle.net/9fhmfog0/4/), что вы имеете в виду? :) –

да, но справа все еще есть пробел. – learningjavascriptks

Как настроить изображение в соответствии с шириной и высотой?

ответ

Смежные вопросы