간단한 html, css 를 이용한 팀 프로젝트를 하는데 이미지가 모니터 비율에 따라 잘리는 부분이 있어서 이것을 수정해야 하는 상황이었다.
1) 16:9 모니터
2) 16:10 모니터
=> 이외에도 창을 축소 확대 할때마다 이미지가 잘리는 부분이 제각각이었다. 이를 해결해보고자 한다.
기존 이미지 스타일 코드
- css
.meam {
height: 700px;
background-image:url("url 이름");
background-position: center;
background-size: cover;
border: 3px outset;
}- html
<div class="meam">
</div>=> css를 확인 하면 hegith 를 설정해주었고 이미지를 불러오는 url()을 사용 그리고 정중앙에 사진이 위치하도록 하였다 하지만 background-dize : cover 로 인해서 해당 창을 꽉 채우게 되어 있기 때문에 창의 크기가 변경될때마다 이미지가 채워지느라 잘리는 부분이 생기고 그랬던 것이다.
해결해보기
.meam {
height: 700px;
background-image:
url(https://velog.velcdn.com/images/lionjojo/post/96cf927c-cce0-4064-80d9-1163466bf36b/image.png),
url(https://img.freepik.com/premium-photo/illustration-art-anime-landscape-in-beach_1148129-2674.jpg);
background-position: center, right;
background-size: contain;
background-repeat: no-repeat,repeat-x;
border: 3px outset;
}=> 이전의 background-size 속성을 cover 에서 contain으로 변경해주면서 사진은 해당 공간에 비율에 맞게 적용되고 빈 공간이 생기도록 되었다. 또한 뒤의 새로운 배경 사진을 추가하여 밋밋한 배경을 보완하였다. repeat-x 속성을 부여함으로서 자연스럽게 뒷 바다의 모습이 반복되도록하였다.
결과 :
=> 하지만 이또한 문제가 있었으니....
=> 위 처럼 x 방향으로만 반복되도록 하였는데 이렇게 되면 위 아래가 잘리게 된다는 점이 있었다. 그렇다고 repeat 가 x,y 축 모두 되도록 위 css 코드를 background-reapeat 속성을 repeat로 하게 되면 아래와 같이 y 축이 더 길게 되면 어색한 모습이 된다.
-> y축으로 반복되고 있기 때문에 어색한 모습이다.
-> 내가 원하는 것은 y축이 더 길게되면 바다사진이 y축에 맞게 x 축 방향으로 반복되는 것이다.
해결해 보자
일단 결과를 보면 다음과 같다.
결과 :
-가로
-세로
=> 당연히 뒷배경도 앞 배경과 같은 contain 으로 하면 된다고 생각을 했지만 그렇게 되면 이미지의 크기가 유지되면서 빈 공간이 생기는 문제가 발생 했지만 cover를 사용함으로서 웹 브라우저의 창에 꽉 차도록 유지되면서 앞 배경의 경우는 이미지의 원본을 유지하기 때문에 내가 원하는 결과를 도출 할 수 있었다.
