HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법

HTML DIV 블록의 이미지가 예상대로 크기를 조정하지 못하고 컨테이너가 오버플로 표시되면 일반적으로 이미지 자체가 크기가 명시 적으로 제한되지 않기 때문입니다. 이 튜토리얼은 이미지의 기본 동작을 설명하고 CSS 너비를 설정하여 오버플로 문제를 해결하는 전문적인 방법을 제공하여 이미지가 부모 컨테이너 너비에 적응할 수 있도록 100%를 설정합니다.

이미지 크기의 기본 동작을 이해하십시오

웹 개발에서 요소는 명시 적으로 지정된 크기없이 원래의 고유 크기 (즉, 이미지 파일의 실제 픽셀 크기)로 렌더링됩니다. 즉, 폭이 제한된 모 컨테이너 (예 : DIV)에 배치 되더라도 이미지는 컨테이너에 맞게 자동으로 축소되지 않습니다. 부모 컨테이너의 너비 속성은 컨테이너 자체의 크기 만 제한되며 자식 요소가 모 컨테이너에 비해 크기로 명시 적으로 설정되지 않는 한 내부 하위 요소의 크기에 직접 영향을 미치지 않습니다.

이미지 오버 플로우 문제의 핵심 이유

개발자가 이미지가 부모 컨테이너의 너비에 적응할 수 있다고 기대하면 종종 이미지 오버플로 문제가 발생합니다. 예를 들어 다음 HTML 구조를 고려하십시오.

 <div style="너비 : 10%; float : 오른쪽; 마진 : 1em;">
    <img  src="profile0.bmp"   style="max-width:90%" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
    <img  src="palomar.jpg"   style="max-width:90%" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
    <img  src="shane.jpg" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
</div>

이 예에서 DIV 요소는 폭으로 설정됩니다. 10%는 부모 요소의 너비의 10%를 차지합니다 (일반적으로 본문 또는 기타 상단 용기). 그러나 내부의 태그는 너비 또는 높이 속성을 설정하지 않습니다. 따라서이 이미지는 원래 크기로 표시하려고합니다. 이미지의 원래 너비가 부모의 DIV 요소가 제공 할 수있는 너비의 10%보다 큰 경우 이미지는 DIV의 경계를 초과하여 레이아웃의 혼란, 소위 "오버플로"입니다.

솔루션 : 폭을 사용하십시오 : 100% 제약 이미지

이미지 오버플로 문제를 해결하기 위해 핵심은 이미지에 모 컨테이너의 전체 폭을 차지해야한다는 것을 명시 적으로 알려주는 것입니다. CSS의 100% 속성을 통해 달성 할 수 있습니다. 요소가 너비 : 100%에 할당되면, 직접 상위 요소의 너비와 같은 너비를 조정합니다 (이 경우 div).

방법 1 : 외부/내부 CSS 스타일 시트를 통해

이것은 특히 여러 이미지에 동일한 규칙을 적용 해야하는 경우 권장되는 연습 방법입니다. CSS 파일 또는 HTML 태그에서 스타일을 정의하면 코드의 유지 관리가 향상 될 수 있습니다.

 /* 모든 이미지가 부모 컨테이너의 너비에 조정되어 있는지 확인하십시오*/
img {
   너비 : 100%;
   높이 : 자동; /* 스트레칭을 방지하기 위해 이미지 종횡비를 유지하십시오*/
}

이 CSS 규칙을 웹 페이지에 적용한 후 모든 요소는 부모 컨테이너의 너비와 일치하도록 너비를 자동으로 조정하고 높이는 이미지가 너비를 변경하여 이미지 변형을 피할 수 있도록 보장합니다.

방법 2 : 인라인 CSS 스타일을 통해

이 규칙을 페이지의 특정 이미지에만 적용해야하거나보다 일반적인 스타일을 무시 해야하는 경우 인라인 스타일을 사용할 수 있습니다.

 <div style="너비 : 30%; float : 오른쪽; 마진 : 1em;">
    <img  src="profile0.bmp"   style="max-width:90%" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
    <img  src="palomar.jpg"   style="max-width:90%" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
    <img  src="shane.jpg"   style="max-width:90%" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
</div>

이 접근법은 직접적이지만 일반적으로 HTML 코드를 장악하고 관리하기가 어렵 기 때문에 많은 수의 요소에 권장되지 않습니다.

실제 예제 및 코드 최적화

초기 목표는 텍스트의 오른쪽에 세 개의 이미지가 떠오르고 각각은 창 너비의 30%를 차지하는 것입니다. 이를 달성하기 위해 올바른 방법은 이러한 이미지를 포함하는 DIV가 창 너비의 30%를 차지한 다음 DIV 내부의 각 이미지가 DIV 너비의 100%를 차지하도록하는 것입니다.

원래 질문 코드 (오버플로를 유발할 수 있음) :

 <div style="너비 : 10%; float : 오른쪽; 마진 : 1em;">
    <img  src="profile0.bmp"   style="max-width:90%" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
    <img  src="palomar.jpg"   style="max-width:90%" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
    <img  src="shane.jpg" alt="HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법" >
</div>

최적화 된 코드 예제 (예상 효과를 달성하기 위해) :

먼저, 이미지 그룹이 점유 할 것으로 예상되는 전체 너비와 일치하도록 부모 DIV의 너비를 조정하십시오 (예 : 30%). 그런 다음 CSS 규칙을 적용하여 이미지를 모 컨테이너에 조정하십시오.

HTML :

 <div class="Image-Gallery">
    <img src="profile0.bmp" alt="profile image">
    <img src="palomar.jpg" alt="Palomar Observatory">
    <img src="shane.jpg" alt="Shane 망원경">
</div>

CSS :

 .Image-Gallery {
    너비 : 30%; / * 부모 컨테이너는 창 너비의 30%를 차지합니다 */
    플로트 : 오른쪽;
    여백 : 1em;
    /* Flexbox 또는 Grid와 같은 다른 레이아웃 스타일은 내부 사진을 정렬하는 데 사용될 수 있습니다*/
    디스플레이 : Flex; /* Flexbox를 사용하여 내부 사진을 레이아웃*/
    플렉스 방향 : 열; /* 수직 스태킹 사진*/
    간격 : 1em; /* 그림 사이의 공백*/
}

.Image-Gallery img {
    너비 : 100%; /* 이미지는 모 컨테이너의 100% 너비를 차지합니다 (.Image-Gallery)*/
    높이 : 자동; /* 종횡비 유지*/
    디스플레이 : 블록; /* 이미지의 맨 아래에 존재할 수있는 추가 공간을 제거*/
}

위의 최적화를 통해 이미지 갤러리 디는 페이지 너비의 30%를 차지하고 오른쪽으로 떠 다니는 반면, 내부의 모든 이미지는이 30% 너비 컨테이너를 완벽하게 채우므로 원래 구상 한 레이아웃 효과를 달성합니다.

중요한 메모

1. 이미지 측 이를 통해 브라우저는 이미지의 새로운 너비에 따라 높이를 자동으로 계산하여 이미지의 원래 종횡비를 유지하고 이미지가 늘어나거나 압축 및 왜곡되지 않도록합니다.
2. MAX-WIDTH : 100% 응용 프로그램 : 일부 시나리오에서는 컨테이너가 작을 때 이미지가 줄어들기를 원하지만 컨테이너가 이미지의 원래 크기보다 큰 경우 이미지를 확대하지 않으려면 이미지가 줄어들지 않을 수 있습니다. 현재 Max-Width : 100%; 더 적합한 선택입니다. 컨테이너에 맞게 그림을 축소 할 수 있지만 고유 한 크기를 넘어 확대되지는 않습니다. 오버 플로우 문제가 해결되는이 튜토리얼의 시나리오의 경우, 너비 : 100%는 이미지가 컨테이너를 채우도록 강요하기 때문에 더 직접적이고 효과적입니다.
3. 반응 형 디자인의 기본 사항 : 너비의 조합 : 100%; 및 높이 : 자동; 반응 형 사진을 구현하기위한 주요 기술 중 하나입니다. 화면 크기와 다른 장치의 컨테이너 크기에 따라 이미지를 자동으로 조정할 수 있으므로 더 나은 사용자 경험을 제공합니다.
4. 디스플레이 : 블록; 그림에 대한 제안 : 요소는 기본적으로 인라인 블록입니다. 경우에 따라 사진 바닥에 여분의 블랭킹이 나타날 수 있습니다. 표시하도록 설정 : 블록; 이 공란을 제거하고 블록 레벨 요소처럼 행동하여보다 정확한 레이아웃 제어를 돕습니다.

요약

HTML에서 이미지 크기를 올바르게 관리하는 것은 우수한 웹 레이아웃과 반응 형 디자인을 달성하는 초석입니다. 모 컨테이너의 이미지가 오버플로 흐를 때 가장 일반적이고 효과적인 솔루션은 폭을 설정하는 것입니다 : 100% 및 높이 : 자동; 요소의 경우. 이렇게하면 이미지가 원래 종횡비를 유지하면서 모 컨테이너의 너비에 적응할 수 있습니다. 부모 컨테이너의 너비 설정과 이미지 자체의 크기 제약 조건을 합리적으로 결합함으로써 개발자는 아름답고 적응할 수있는 웹 레이아웃을 쉽게 만들 수 있습니다.

위 내용은 HTML/CSS 이미지 컨테이너 오버플로 : 부모 요소에 맞게 이미지 크기를 올바르게 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!