JavaScript 없이 CSS를 사용하여 이미지 크기를 백분율로 조정하는 방법은 무엇입니까?

CSS에서 이미지 크기를 백분율로 조정

질문:

어떻게 할 수 있나요? 원래 이미지 크기를 알 수 없는 시나리오에서 JavaScript나 서버 측 솔루션을 사용하지 않고 CSS를 사용하여 이미지 크기를 백분율로 줄일 수 있습니까?

답변:

방법 1(시각적 크기 조정):

이 접근 방식은 DOM에서 원래 크기를 유지하면서 시각적으로만 이미지 크기를 조정합니다. 그러나 크기가 조정된 이미지는 원본 컨테이너의 중앙에 위치합니다.

<code class="css">img {
  transform: scale(0.5);
}</code>

HTML:

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

방법 2(백분율 기반 배경 크기) :

또는 이미지가 포함된 DIV 요소에 백분율 기반 배경 크기를 적용할 수 있습니다.

<code class="css">.image-container {
  width: 100%;
  height: 100%;
  background-image: url("image.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
}</code>

HTML:

<code class="html"><div class="image-container"></div></code>

참고:

방법 1은 단일 이미지에 대해 원하는 크기 조정 결과를 얻는 반면, 방법 2는 컨테이너 내에서 여러 이미지의 크기를 일관되게 조정하는 데 사용할 수 있습니다.

위 내용은 JavaScript 없이 CSS를 사용하여 이미지 크기를 백분율로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!