이미지가 div 테두리 안에 머물지 않습니다.

이미지가 div 테두리 안에 머물지 않습니다.

웹사이트: isfnpub.com

지금은 이미지를 맞추기 위해 추가 패딩을 사용하고 있지만 보시다시피 div는 이미지를 완전히 무시하고 있습니다.

워드프레스에서 일하고 있습니다.

사용 코드:

<div style="border: 5px solid #FFC85D; padding: 10px; margin:30px;">

<p><strong>UPCOMING RELEASE: ISFN ANTHOLOGY #1</strong></p>

<p>[caption id="attachment_801" align="alignright" 
width="189" 
caption="Click image for full cover spread."]
<a href="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-full.jpg" 
target="_blank">
<img src="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-189x300.jpg" 
alt="" 
title="Anthology 1 front" 
width="189" height="300" 
class="size-medium wp-image-801" /></a>
[/caption]
<strong>Authors: </strong> blah blah blah.</p>

<p><strong>Cover Art By:</strong> Xenia Latii</p>

<p>blah blah blah</p>

</div>

div border가 이미지를 포함한 모든 컨텐츠를 자연스럽게 감싸주길 바랍니다.여분의 패딩이 없으면 이미지가 테두리와 겹쳐지고 모든 것이 우글로 보입니다.

감사해요.

편집: 사용했습니다.<div style="overflow:auto; ...">효과가 있는 것 같습니다.이것이 적절한 해결책인가요, 아니면 나중에 문제가 생길까요?

제가 제대로 이해했다면 그게 필요하신 것 같습니다.사용해 봅니다.overflow:hidden그것이 당신의 문제를 해결해 줄 것입니다.

해라overflow: hidden그리고 div의 너비를 예를 들어 300 px로 설정한 다음 그림 너비를 100%로 설정합니다.

img 태그를 div로 설정하려면 너비와 높이를 설정해야 합니다.

예.

img style="폭:100%;높이:100%;" alt="abc..." src=" https:// somesite/your_pic.png"

두 가지 오버플로 옵션 모두 이미지 크기를 조정하기보다는 이미지 크기를 조정하기 위해 분할 영역 밖에 있는 부분을 잘라내기만 하면 됩니다. 이것이 실제로 이루어져야 하는 것입니다.디브 속성을 이용하면float-none속임수를 쓰는 것 같습니다.

언급URL : https://stackoverflow.com/questions/5697260/image-wont-stay-inside-div-border