어떤 컨테이너 크기 제약 조건이 적용되는지에 관계없이 이미지가 항상 전체 화면으로 표시되도록하는 방법이 있습니까? 제 경우에는 크기가 다른 다양한 컨테이너 (일반적으로 백분율로 지정됨)에 이미지가있는 HTML 파일을 서버에서 받고 있습니다. 각 이미지에 대해 CSS를 사용하여 컨테이너를 "부수고"항상 가득 채우고 싶습니다. 화면 폭.CSS 전체 너비 고정 컨테이너 내부 이미지
어떻게해야합니까?
'문제를 해결하려면'img { position: absolute; }을 CSS에 적용하여 스태킹 컨텍스트와 분리해야합니다. 그런 다음 img { width: 100%; }을 적용하여 전체 창 너비로 가져올 수 있지만 결과적으로 레이아웃에 문제가 발생할 가능성이 있습니다. 레이아웃의 무결성을 유지하기 위해 문서의 스태킹 컨텍스트 내에서 배치 컨테이너를 전체 너비로 만드는 데 중점을 두어야합니다.이 레이아웃은 최종 선택 경로로 변경됩니다.
당신은'top : 0px; 왼쪽 : 0px' .. 또한'height : 100 %;'또는'height : auto'를 필요로 할 수도 있습니다 .. –
안녕하세요 스튜어트, 위치를 추가 할 때 언급했듯이 절대적으로 이미지에 다른 레이아웃 문제가 생기는 경우가 있습니다. . 다른 포장 용기에 적용되는 CSS를 제어 할 수 없다면이 문제를 해결할 방법이 없을까요? – Neil
해킹이있을 수 있지만,주의 깊게 살펴보아야합니다. 이것들은 레이아웃의 나머지 항목들에 달려 있기 때문에 말하기 어렵습니다. 하나의 가능성이 있습니다 : wrapping containers에'position : relative;'를 적용하면'top : 0; @ JoshC가 언급 한대로 당신의 이미지에 0 점을 남겼습니다. 그런 다음 래퍼에'오버플로 : 표시; '를 추가하고 이미지에 음수 여백 (또는 다른 해킹 된 것)을 추가하여 실험 할 수 있습니다. –
이미지를 절대적으로 배치 할 수 있습니까? http://jsfiddle.net/davidpauljunior/KM4Zj/ – davidpauljunior
예,하지만 이렇게하면 이미지가 텍스트 내용과 겹칠 수있는 또 다른 문제가 발생할 것으로 보입니다. 어쨌든 이미지를 스태킹 컨텍스트에서 완전히 꺼내지 않고 완전히 넓게 말하려하지 않습니까? – Neil