절대 위치 지정 없이 래퍼를 하위 이미지의 최대 너비에 맞게 동적으로 조정하려면 어떻게 해야 합니까?

래퍼가 최대 하위 이미지 너비를 준수하도록 만들기

래퍼 요소가 해당 하위 이미지의 최대 너비에 맞게 너비를 조정해야 하는 시나리오에서 이미지에서 래퍼에 고정 너비를 사용하는 것은 이상적인 솔루션이 아닙니다. 목표는 이미지와 텍스트 콘텐츠의 동적 특성으로 인해 절대 위치 지정을 사용하지 않고 이를 달성하는 것입니다.

해결책:

훌륭한 솔루션은 아니지만 다음이 있습니다. 다른 표시 속성을 사용하여 이를 달성하는 방법입니다. 표로 표시되도록 래퍼를 설정하고 CSS를 사용하여 너비를 1%로 지정하면 이미지가 이 너비를 재정의하고 최대 размер로 확장됩니다.

다음은 래퍼에 대한 CSS 코드입니다.

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

그리고 이미지가 포함된 래퍼의 HTML 코드와 text:

<div class="wrapper">
  <img src="your_image_url">
  <p>Your text content goes here.</p>
</div>

이 기술을 사용하면 래퍼는 텍스트 길이에 관계없이 하위 이미지의 최대 너비로 확장됩니다.

위 내용은 절대 위치 지정 없이 래퍼를 하위 이미지의 최대 너비에 맞게 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!