동적 크기의 이미지/제목에 텍스트 너비 맞추기: 단계별 가이드

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 等），然后强制文本宽度为 phpcnc phpcn0 所以容器的宽度是由图像定义（文本不影响宽度），然后使用 min-width 再次强制宽度为 100%

로 설정

으아아아 으아아아