위치 절대하지만 컨테이너에서 이미지를 가져 오는 방법은 무엇입니까?

콘텐츠 컨테이너의 너비가 500px이고 오른쪽으로 떠있었습니다. 이 컨테이너에는 텍스트가 포함 된 다음 이미지가 포함 된 다음 텍스트가 포함됩니다. 궁극적으로이 이미지를 경계 500px 컨테이너에서 꺼내어 페이지의 전체 너비에 걸쳐 놓고 싶습니다. 인수는 1000px입니다. 실제로 이미지는 전체 너비 (1000px 너비)이고 내용 컨테이너의 너비는 500px입니다. 이와 같이 이미지를 최대 너비로 만들 수있는 가장 좋은 방법은 무엇입니까?위치 절대하지만 컨테이너에서 이미지를 가져 오는 방법은 무엇입니까?

jsfiddle.net/QCb3R/

나는 .content div의 외부 완전히 확장 할 이미지를 끌어 싶습니다.

<div class="container"> 

    <div class="content"> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p> 

    <img src="http://lorempixel.com/500/300/" /> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p> 

    </div> 

</div>

그리고 CSS :

.container { 
    width: 1000px; 
    background-color: #eee; 
} 
.content { 
    width: 500px; 
    float: right; 
}

출처

2013-05-02 Matt

HTML/CSS가 어떻게 보이는지 보여주십시오. 또는 더 나은, http://jsfiddle.net/ 만들 – matthewpavkov

나는 jsfiddle에 대한 링크로 질문을 업데이 트했습니다. – Matt

그리고 '500px'컨테이너 div의 일반적인 흐름을 유지하고 싶습니까? 짧은 대답은 여기에 있습니다. 정의에 의해'position : absolute'를 사용하면 문서 흐름에서 그것을 제거합니다. 무엇을 성취하려고합니까? 아마도 또 다른 접근법이있을 것입니다. 이 html로 고정되어 있거나 변경 될 수 있습니까? 이미지가이 '500px'div에 있어야하는 이유는 무엇입니까? – matthewpavkov

확실히 그 효과를 쉽게 만들 수 있지만 절대 위치 할 이미지를 설정하는 것입니다.

여기 정상적인 문서 플로우에서 영상이 걸리기 때문에 바로 절대적 위치하도록 이미지 설정으로 jsFiddle

.container { 
    width: 1000px; 
    background-color: #eee; 
} 
p { 
    width: 500px; 
    float: right; 
} 
.content { 
    width: 1000px; 
    float: right; 
}

문제이다. 원본 이미지에서 남겨진 틈을 같은 높이의 자리 표시기 요소로 채운 다음 절대 위치 이미지를 자리 표시 자 요소의 위쪽에 배치해야합니다. CSS와 HTML만으로는 불가능한 페이지 요소의 위치를 검색하기 위해 DOM에 액세스해야하므로 JavaScript에 대한 작업처럼 들립니다.

출처

2013-05-02 04:14:13

위치 절대하지만 컨테이너에서 이미지를 가져 오는 방법은 무엇입니까?

답변

관련 문제