래퍼 요소가 하위 이미지의 최대 너비에 맞게 자동으로 조정되도록 하려면 어떻게 해야 합니까?

래퍼가 하위 이미지의 최대 너비를 갖도록 하시겠습니까?

소개:

웹사이트 디자인에서 , 하위 콘텐츠의 너비에 자동으로 조정되는 래퍼 요소를 만들어야 할 수 있습니다. 너비는 소스에 따라 달라질 수 있으므로 하위 콘텐츠가 이미지인 경우 특히 유용합니다.

원하는 결과:

래퍼 요소를 생성하려고 합니다. 고정 너비를 명시적으로 설정하지 않고 하위 이미지의 최대 너비를 사용합니다. 이렇게 하면 래퍼가 필요 이상으로 넓지 않으면서도 이미지가 올바르게 표시될 수 있습니다.

해결책:

다음을 사용하여 이 동작을 달성하는 것은 불가능합니다. 순수 CSS에는 사용할 수 있는 "해킹"이 있습니다. 래퍼 요소를 테이블로 만들고 너비를 1%로 설정하면 이미지를 속여 래퍼의 너비를 깨뜨리고 자체 너비를 래퍼의 너비로 설정하도록 할 수 있습니다. width.

코드:

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

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum...</p>
</div>

설명:

디스플레이를 테이블로 설정하면 요소는 테이블로 변환되고 해당 하위 요소는 테이블 셀이 됩니다. 그러나 래퍼에도 1%의 너비가 주어지는데 이는 매우 작습니다. 따라서 이미지는 래퍼의 너비를 무시하고 자체 너비를 설정하며, 이는 래퍼의 실제 너비가 됩니다.

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