이 코드펜을 참조하세요: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0<div><imgsrc="https://res.cloudinary.com/djcpf0lmv/image/upload/ v1549372650/ 템플릿/yoga.jpg"data-radium="true

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

Q&A

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

P粉741678385 2024-04-06 10:04:43 보다 998

HTML

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

으아악

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

즉, 어떻게 변환하나요?

다음을 입력하세요:

Your Answer

제출하다

2 답변

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

으아악

또는 수업에 추가하세요:

으아악 으아악

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

2024-04-07 09:39:14

제출하다