CSS에서 가로로 배경 이미지 늘이기

Question

나는이 질문을 정말로 자주 여기에서 물어 보았다.하지만 기존 솔루션 중 아무 것도 나에게 도움이되지 못했다. 나는 전체 뷰포트를 채우기 위해 가로로 늘려야하는 장식 리본이있는 가로 빈 블록을 가지고 있습니다.

#upper-line { 
 
\t background: url(../images/upper-line.png) no-repeat; 
 
\t position: relative; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t width: 100%; 
 
\t height: 133px; 
 
\t background-size: cover; 
 
}

<div class="container-fluid"> 
 
     <div id="upper-line"></div> 
 
    </div>

문제

I는 이미지가 세로 비율을 변경하거나 이동하지 않고 수평으로 만를 늘릴 필요가 있다는 것이다. 또한 절대 위치로 엄청난 높이 값을 사용할 수 없기 때문에 위에있는 블록을 조이 지 않기 위해 상대 위치를 사용하려고합니다. 배경 크기 속성으로 문제를 해결하려고하지만 이미지가 단지 블록 높이 밖의 대각선 방향으로 이동하기 때문에 높이 값이 증가하지 않을 때마다 표시되지 않습니다.

\t background-size: 100% 100%;

이 하나가 나에게 도움이되지 않았다 중 하나 -이 이미지를 수평으로 뻗어 네비게이션 바와 비율로 유지하지만, 수직으로 좋다고 내가 스트레칭 단지 수평 height-을 유지해야합니다. 도움이 될 것입니다.

P. 어떤 속성/값이 컨텐트없이 블록을 만들지 만 배경 이미지 만 있으면 창에 나타 납니까?

Answer 1

내가 이해 한 것으로부터, 당신이 원하는 것은 단순히 이미지를 양쪽으로 늘리는 것이지만, 원래의 높이를 유지하는 것인가?

나는 이미지의 높이를 알고 있다고 가정합니다. 이 예에서는 높이가 15 픽셀 인 이미지를 사용합니다. 은 그럼 그냥 사용할 수 있습니다

background-size: 100% 15px; 

으로는 사진이 옆으로 늘어이 바이올린 https://jsfiddle.net/o3czsv9b/2/에서 볼 수 있지만 유지 될 수

는 높이입니다. 그것은 그것이 부끄러운 것처럼 보입니다.

---

이미지의 이름에서 선 그림을 찍는 것처럼 들립니다. 뭔가를 옆으로 펼치고 싶다면 가끔

background-repeat-x: repeat; 
background-repeat-y: no-repeat; 

으로 원하는 결과를 얻을 수 있습니다. 그것은 당신의 이미지에 달려 있습니다. 이 바이올린을 확인하십시오 : https://jsfiddle.net/o3czsv9b/1/