CSS 단락 다음 CSS/HTML 고려 이미지

Question

주위 포장 : 뷰포트의 크기를 조정할

img.text-wrap-left { 
 
    float:left; 
 
}

<p> 
 
    <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam. 
 

 
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit. 
 
</p>

는, 텍스트가 이미지의 권리를 포장 것, 또한이 될 것이다 매우 좁은 문자로 된 것뿐입니다.

패딩과 여백을 희생하지 않고 단락이 이미지 아래로 완전히 들어가기 전에 텍스트의 최소 너비를 지정할 수 있습니까?

이 예제에서 쉬운 해결책은 media CSS 조건을 추가하고 특정 너비로 ​​display:block;으로 이미지를 보냅니다. 문제는 이것이 단지 예일뿐입니다. 내 문제는 텍스트와 함께 사용되는 이미지가 다양한 너비를 가질 수 있다는 것입니다 (예 : 사용자 정의). 나는 반응 형 솔루션을 찾고 있습니다.

아이디어가 있으십니까?

Answer 1

더 나은 옵션은 이미지의 최대 너비를 일정 비율로 유지하고 일부 지점에서 텍스트를 줄 바꿈하기 위해 미디어 쿼리를 추가하는 이미지에 max-width을 사용하는 것입니다. Fiddle

img.text-wrap-left { 
 
    float:left; 
 
    max-width: 50%; 
 
} 
 
@media(max-width: 480px) { 
 
    img.text-wrap-left { 
 
    display: block; 
 
    float: none; 
 
    max-width: 100%; 
 
    } 
 
}

<p> 
 
    <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam. 
 

 
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit. 
 
</p>