'background-size : contains;'와 같은 응답 크기의 아이콘에 대한 스프라이트

나는 많은 아이콘을 가진 앱을 가지고있다. 필자는이 아이콘에 스프라이트를 사용하는 것이 여러 개의 작은 이미지를 갖는 대신 올바른 방법이라는 것을 알고 있습니다. 그러나, 나는 용기 (background-size: contain;)과 같은 크기로 그 아이콘이 필요, 그래서 각 아이콘에 대해 여러 이미지를 사용할 수 밖에 없었다 :'background-size : contains;'와 같은 응답 크기의 아이콘에 대한 스프라이트

.icon1 { 
    background-image: url('../my-site/icon1.gif'); 
    background-size: contain; 
} 

.icon2 { 
    background-image: url('../my-site/icon2.gif'); 
    background-size: contain; 
} 
. . . and so on...

그러나 스프라이트를 사용으로 초래

(background-size: contain; 없음) - 즉, 버튼을
(는 background-size: contain; 사용) 큰 경우 이미지가 너무 작아서 - 일 전체 스프라이트가 컨테이너에 표시됩니다!

아이콘을 보여줄 것이라고 응답 스프라이트를 사용하는 방법 (가 background-position 사용) 및 컨테이너의 아이콘 100 % 폭과 높이를하고 있습니까?

출처

2017-09-06 Geoman Yabes

스프라이트, 포함 또는 커버 중 많은 부분이 표시되는 경우 불필요한 부분을 잘라내려면 필요한 비율로 하나 및 배경 크기에 집중해야합니다. 효율적으로 도움을 받으려면 코드와 스프라이트를 게시하십시오. 당신을위한 당신의 의지 –

https://stackoverflow.com/questions/45595520/css-sprite-background-sizecover/45596000의 가능한 복제물 적어도 내가 준 대답은 조금 설명해 주었다;) –

awesome .. 그럴 수있다 –

슬프게도 그것을 달성하는 마법의 해결책은 없습니다. 배경 자체의 크기를 수동으로 조정해야합니다. 배경 크기를 변경하여 당신은 또한 배경의 위치를 변경해야한다는

는

#home { 
 
    width: 46px; 
 
    height: 44px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0; 
 
} 
 

 
#next { 
 
    width: 43px; 
 
    height: 44px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) -91px 0; 
 
} 
 

 
#home-double { 
 
    width: 92px; 
 
    height: 88px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0; 
 
    background-size: 268px; 
 
} 
 

 
#next-double { 
 
    width: 86px; 
 
    height: 88px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) -182px 0; 
 
    background-size: 268px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Normal size</p> 
 
<p><img id="home" src="img_trans.gif"></p> 
 
<p><img id="next" src="img_trans.gif"></p> 
 

 
<p>Double size</p> 
 
<p><img id="home-double" src="img_trans.gif"></p> 
 
<p><img id="next-double" src="img_trans.gif"></p> 
 

 
</body> 
 
</html>

참고.

물론 미친 짓이며 말이되지 않습니다.

최근에 스프라이트를 사용하여 SVG 스프라이트를 사용하지 않았습니다. 그들은 믿을 수없고 더 유연하며 훨씬 더 많이 할 수 있습니다. 당신은 그들의 색깔과 크기를 바꿀 수 있고, 망막 스크린에서 잘 놀 수 있습니다.

여전히 PNG 아이콘을 선호한다면 스프라이트를 버리십시오. 적절한 유지 관리 과정을 거친 경우에도 유지 관리가 어렵습니다. https 및 http2로 이동하면 여러 동시 요청에 대해 전혀 문제가 없습니다.

출처

2017-09-06 11:22:23

'background-size : contains;'와 같은 응답 크기의 아이콘에 대한 스프라이트

답변

관련 문제