자식요소만 화면에 꽉차게 할 수 없나요?
본문
이미지뒤에 background를 넣고 싶은데
이미지 부모 div 크기가 1280px이거든요
2460px의 백그라운드를 이미지 뒤에 넣어서 양쪽이 보이게 하고
기존 레이아웃이나 크기는 그대로 하면서 웹을 축소했을때만 양쪽이 더 보이게 하고 싶어요
부모 width를 2460으로 바꿔버리면 전체적으로 커져버리더라고요..
고수님들 도움 부탁드립니다 ㅠ
답변 3
백그라운드로 넣으려면 리소스 감당을 어찌 하시려 하시나요...
2460px 의 백그라운드 이미지 렌더링.. 생각만해도 아찔하네요..
부모의 크기가 1280px 이면 국민해상도 1920 기준으로 양 옆에 날개를 붙이세요.
인벤처럼.
그리고 @media 쓰셔서 모바일도 분기 해주시구요
지금 생각하시는 방법은 절대로 권장하는 방법이 아닙니다..
오 좋은 말씀 감사합니다 제가 초보라 혹시 양옆에 날개붙이는 방법을 알려주실수있나요?
css 부터 차근히 공부하세요.
시간 투자가 아까우시면 상단에 제작의뢰 라는 아주 멋진 버튼이 있습니다.
2460px 말고 2460 이미지에 css100vmax 해보세요.
다음과 같이 해볼 수 있을것 같습니다.
방법1.
/* CSS */
.parent-div {
width: 1280px;
height: 500px; /* 이미지의 높이에 맞게 조절해주세요 */
background-image: url("배경이미지_파일_경로.png"), url("원하는이미지_파일_경로.png");
background-repeat: no-repeat;
background-position: left top, right top;
background-size: contain;
}
이렇게 하면 이미지 뒤에 2460px의 백그라운드를 보이게 할 수 있으며, 이미지의 비율을 유지하면서 이미지를 최대한 확대하여 표시 할 수 있습니다.
방법2.
/* CSS */
.parent-div {
width: 1280px;
height: 500px; /* 이미지의 높이에 맞게 조절해주세요 */
background-image: url("배경이미지_파일_경로.png"), url("원하는이미지_파일_경로.png");
background-repeat: no-repeat;
background-position: left top, right top;
background-size: contain;
}
이렇게 하면 이미지를 부모 요소에 맞추되, 이미지의 비율을 유지하지 않고 잘라내어 배치하며, 이미지 뒤에 2460px의 백그라운드를 보이게 할 수 있고, 이미지를 최대한 확대하여 표시합니다
위의 방법중 테스트 해보시고 원하시는 방법으로 해결 될 수 있을 것 같습니다.
이 이외에도 방법은 다양할 수 있습니다.
