캡션을 이미지의 크기로 축소

부모의 크기를 늘리기 전에 내 span을 감싸라고 말할 방법이 있습니까 div?캡션을 이미지의 크기로 축소

내 모형 : http://jsfiddle.net/e52pZ/4/

색깔 블록이 정의되지 않은 크기의 이미지, 그리고 흰색 블록이 서로 옆에 떠있는 것이다.

임시로 Bart의 jQuery 응답을 수락합니다. 누구나 "순수한"HTML + CSS 솔루션을 찾아 낼 수 있다면, 우리는 그것을보고 싶어 할 것입니다.

출처

2011-10-17 bukzor

+1은 바이올린입니다. –

각 div.shrink 요소에 특정 너비를 추가하지 않으면이 작업을 수행 할 수 없습니다.

예 : IMG 크기가 완전한 알 수없는, 항상 다를 수 http://jsfiddle.net/e52pZ/2/

경우, jQuery를 함께 같은 것을 할 수 있습니다 :

$('.shrink').each(function(){ 
    var self = $(this); 
    self.width(self.find('img').width()) 
});

예 : http://jsfiddle.net/e52pZ/7/

출처

2011-10-17 21:16:12 Bart

무한대에 1의 가늠자에, 당신은 css/html로 이것을 할 수 없다 당신은 얼마나 확실합니까? – bukzor

나는 바트가 아니지만 다양한 수축 포장 기술 등을 사용하여 꽤 오래 시도했습니다. 1에서 10까지의 범위에서 내 확실성을 나타 냈습니다. 나는 무한과 어떻게해야할지 모르겠다. 8. 누군가가 나를 잘못 알았 으면 좋겠다. 나는 이것을/순수한 CSS와 HTML만으로 가능하게하고 싶다. =) –

1에서 무한대까지 ... 1과 무한대 사이의 절반입니다. ;) – Bart

"display : table-cell"의 속성은 이 약간에 가까워 보이는 것 같습니다. 그것은 나를 아는 사람들이 더 많은 일을 필요로합니다.

http://jsfiddle.net/e52pZ/12/

출처

2011-10-17 22:28:33 bukzor

는 난이 하나를 알아 낸 것 같아요. 트릭은 display : table을 사용하는 것이며, 캡션에는 종종 잊어 버린 표시 인 표 캡션을 사용합니다. http://codepen.io/jhereg00/pen/qEGzob

그것은 기본적으로이있어 :

<figure> 
    <img> 
    <figcaption></figcaption> 
</figure>

figure { 
    display: table; 
    caption-side: bottom; 
} 
figcaption { 
    display: table-caption; 
}

또는, 당신은 당신의 바이올린에 그랬던 것처럼 용기의 스타일을 위해, 당신이해야 내가 여기에 펜을 만든 내 펜에서했던 것처럼 다른 배치 div를 추가하십시오.

출처

2015-04-08 17:02:30

캡션을 이미지의 크기로 축소

답변

관련 문제