크기 조정 된 이미지 너비를 기반으로 즉석에서 div 너비를 설정하는 방법

이미지를 둘러싸는 div의 너비를 이미지의 아래쪽에 작은 텍스트로 조정하여 텍스트를 줄 바꿈해야 이미지 너비를 초과합니다. 엄지의 너비는 엄지 손가락에서부터 엄지 손가락까지 다양합니다. 아래 코드에서 알 수없는 너비를 "???"로 지정했습니다.크기 조정 된 이미지 너비를 기반으로 즉석에서 div 너비를 설정하는 방법

<div id="N-03-item" style="float:left; width: ???;"> 
    <p><a href="item.php?i=8"> 
    <img id="N-03" src="photos/thumbs/8.jpg" alt='Choker Necklace 18"'/><br/> 
    Frosted Flower Choker Necklace 18"</a></p> 
</div>

나는이 (CSS의 솔루션도 좋은 것입니다하지만) 자바 스크립트 일어날 필요가 뭔가 추정하지만, 자바 스크립트는 내 힘이 아니다. 결과 div 폭은 DOM이 이미지 폭을 각 인스턴스에보고하는 것에 따라 매번 달라야합니다.

누군가 적절한 자바 스크립트가 무엇인지 말해 줄 수 있습니까? 당신이 jQuery를 사용할 수있는 경우

출처

2012-03-10 sanitycheck

불필요한 부분을 제거하여 질문에 조금 더 자부심을 가질 수 있습니다. 가지고있는 코드를 복사하는 것이 아닙니다. 이것은 당신이 물어보기 전에 생각했다는 것을 알려줍니다. – HerrSerker

그것은 같은 수 woould :

$("#N-03-item").css({ 
    "width": $("#N-03").width() 
});

출처

2012-03-10 16:34:49 Voooza

페이지의 onready 이벤트에서 그렇게 할 수는 있지만, 이미지가 변경되지 않아서 너비가 올바르게 반환되지 않아로드되지 않습니다. –

예 있습니다. 이미지가 동적으로로드되는 경우 특히 유용합니다. 그러나 이미지가로드 될 때 div가 "너비"를 무시하고 이미지 크기로 퍼지지 않을까요? – Voooza

확인을,이 자바 스크립트를 사용할 필요가 없습니다. 내가 jQuery를 함께했던 지금

OK, @sanitycheck이 바이올린을 http://jsfiddle.net/jeykeu/WCHcP/2/

업데이트를 확인합니다. 나는 그것이 이러한 가정을 바탕으로

출처

2012-03-10 16:55:52

이것은 나를 위해 작동하지 않습니다. 최대 크기를 미리 정해진 고정 크기로 설정하고 싶지 않습니다. div의 너비를 이미지 인스턴스의 너비에서 파생 시키려고합니다. – sanitycheck

어쨌든 max-width 속성을 가진 div가 도움이 될 것입니다. @ Voooza의 답변과 광산을 함께 사용해 보시지 않겠습니까? –

도움이 희망 바이올린 http://jsfiddle.net/jeykeu/2dBJa/2를 체크 아웃 :

당신은 서버 코드를 포함하는 DIV에 그 폭을 이미지의 폭을 액세스하고 설정할 수 없습니다
솔루션은 절대 위치를 사용하고 흐름에서 텍스트를 소요하기 때문에 당신은, 줄 바꿈에 대한 충분한 공간을 확보 할 수 있습니다

나는 시도 할 것이다 :

#N-03-item { 
    position : relative; 
} 

/* if you can add a class for items, in addition to ID (e.g. N-03-item) than use a 
    rule such as 

.item { 
    position :relative 
} 

*/ 

.description{ 
     position : absolute; 
}

설명은 절대적으로 배치되었지만 위쪽 또는 왼쪽을 지정하지 않았습니다. 대부분의 사용자 에이전트는 에이 있어야하는 곳에 .description 요소를 배치하려고 시도합니다. 이렇게하면 설명의 폭이 항목 DIV의 너비에 의해 바뀝니다 (자체가 왼쪽으로 부 쳐져 있으므로 이미지 너비에 맞게 축소됩니다).

다음 항목이있는 경우 항목 아래에 충분한 공간을 예약해야합니다. 텍스트가 흐름에서 제외됩니다.

예 : http://jsfiddle.net/5FJvd/

출처

2012-03-10 17:07:56 dave

여기에 완전한 작동 예입니다. 이미지로드가 완료되면 DIV의 너비가 조정됩니다. 조기에 domready 이벤트가 될 수 있습니다. document.onload가 실행될 때까지 기다릴 필요가 없습니다. BR 태그를 없애고 마크 업을 약간 개선했습니다.

CSS

.link-thumb { float: left; border: 1px solid gold; position: relative; } 
.link-thumb img { display: block; } 
.desc { position: absolute; }

HTML

<div class="link-thumb" id="id"> 
    <a href="#"> 
     <img class="thumb" id="id" src="http://placekitten.com/100/100" alt="foo" width="100" height="100" /> 
     <span class="desc">Frosted Flower Choker Necklace 18"</span> 
    </a> 
</div>

$('.thumb').on('load', function() { 
    var $this = $(this); 
    $this.parents('.link-thumb').width($this.width()); 
});

당신이 .bind 방법으로 .on 방법을 대체 1.7+ jQuery를 사용하지 않는 경우 (JSFiddle 참조)!

편집 : 저는 dave의 CSS 전용 솔루션을 통합했습니다. 따라서이 스크립트는 IE7 이상에서만 실행해야합니다! 그러나 유스 케이스에 따라 .desc가 이제 플로우의 일부가 아니므로 .link-thumb에 고정 높이를 설정해야 할 수도 있습니다.

출처

2012-03-10 17:12:15

dave의 솔루션은 우아하고 정확합니다.하지만 IE7 이상에서는 실패합니다. –

$ this.parents ('.link-thumb') 대신 이론적으로 둘 이상의 값을 반환 할 수 있으므로 $ this.closest ('.link-thumb')를 사용하는 것이 좋습니다. –

크기 조정 된 이미지 너비를 기반으로 즉석에서 div 너비를 설정하는 방법

답변

관련 문제