동적으로 크기가 조정된 이미지/제목의 너비에 텍스트 너비를 맞추려면 어떻게 해야 합니까?

Question

이 코드 펜을 확인하세요: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

으아악

부모 div와 두 개의 자식 div(이미지와 설명)가 있습니다. 뷰포트 높이를 기준으로 이미지 크기를 조정합니다. 즉, 너비가 동적이고 반응성이 뛰어납니다. JavaScript 없이 이미지 너비에 맞게 해당 형제 div .description의 크기를 어떻게 조정할 수 있나요?

즉, 어떻게 변환하나요?

다음을 입력하세요:

Answer 1

이미지 너비를 100%로 간단히 설정할 수 있습니다. 다음과 같이 테스트하려면 img 스타일 태그에 "width:100%;"를 추가하세요.

으아악

또는 수업에 추가하세요:

으아악 으아악

"display: block"은 너비에 관계없이 이미지가 항상 자체 블록에 있는지 확인합니다. 즉, 텍스트가 옆에 표시되지 않고 아래 또는 위에만 표시됩니다.

Answer 2

용기 만들기 inline-block（或任何收缩到适合的配置，如table、inline-grid、inline -flex、float、absolute 等）然后强制文本宽度为 0，从而定义容器的宽度通过图像（文本不影响宽度），然后使用 min-width

再次强制宽度为 100%

으아악 으아악