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

0

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

으아악

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

즉, 어떻게 변환하나요?

다음을 입력하세요:

Your Answer
제출하다

2 답변
0

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

으아악
또는 수업에 추가하세요:

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

2024-04-07 09:39:14

제출하다

0

용기 만들기 inline-block(或任何收缩到适合的配置,如tableinline-gridinline -flexfloatabsolute 等)然后强制文本宽度为 0,从而定义容器的宽度通过图像(文本不影响宽度),然后使用 min-width

再次强制宽度为 100%

으아악 으아악
2024-04-07 09:10:01

제출하다

Hot Tools

vc9-vc14(32+64비트) 런타임 라이브러리 모음(아래 링크)

vc9-vc14(32+64비트) 런타임 라이브러리 모음(아래 링크)

phpStudy 설치에 필요한 런타임 라이브러리 모음을 다운로드하세요.

VC9 32비트

VC9 32비트

VC9 32비트 phpstudy 통합 설치 환경 런타임 라이브러리

PHP 프로그래머 도구 상자 정식 버전

PHP 프로그래머 도구 상자 정식 버전

Programmer Toolbox v1.0 PHP 통합 환경

VC11 32비트

VC11 32비트

VC11 32비트 phpstudy 통합 설치 환경 런타임 라이브러리

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.