CSS를 사용하여 이미지 높이를 자동으로 조정하는 방법

폭포 흐름과 같은 images목록 레이아웃에서는 CSS를 사용하여 DIV의 이미지 너비와 높이를 제어하는 ​​것을 종종 볼 수 있습니다. 실제로 이러한 레이아웃은 매우 간단합니다. 오늘 자세히.

이러한 DIV CSS 레이아웃은 실제로 매우 간단합니다. 이미지의 너비만 제어하면 되며 이미지의 높이는 설정할 필요가 없습니다. 즉, 이미지의 높이가 자동으로 설정됩니다. 크기 조정 비율에 맞게 조정합니다(높이가 설정되지 않은 경우 높이 값은 기본적으로 자동 적응으로 설정됩니다).

위와 같이 CSS로 ".imgbox"라는 DIV 상자를 추가하고 이미지의 너비는 252px입니다. 이때 CSS를 작성하여 object에 있는 이미지의 높이가 자동으로 조정되도록 작성합니다. 너비:

.imgbox img{width :252px}

간단합니다CSS 선택기는 CSS 높이(height) 스타일을 설정하지 않고도 DIV 상자 ".imgbox"의 이미지 너비를 제어할 수 있습니다. , 기본 이미지는 너비에 따라 적응적으로 크기가 조정됩니다.

요약:

초보자의 경우 너비와 높이가 설정되지 않으면 기본적으로 적응된다는 점을 잊고 이미지의 너비를 설정하는 문제에 직면할 수 있으며 높이를 설정해야 한다고 생각할 수 있습니다. 실제로 CSS 레이아웃의 고정 이미지 너비 및 적응형 높이 요구 사항에 따라 CSS는 너비 값만 설정하면 되며 높이는 설정을 추가하지 않고도 원하는 레이아웃 효과를 얻을 수 있습니다.

레이아웃에서 이미지의 높이와 너비가 고정된 경우 이미지의 크기나 비례에 관계없이 레이아웃의 이미지 너비와 높이가 고정됩니다. 동시에 이미지의 높이 값.

이 분석을 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에서 다른 관련 기사를 주목해 보세요!

관련 읽기:

DIV에 적응형 높이를 만드는 방법

CSS를 사용하여 HTML에서 div를 숨기는 방법

프론트 엔드 반응형 레이아웃, 반응형 이미지 및 자체 레이아웃에 대한 자세한 설명 만든 그리드 시스템

위 내용은 CSS를 사용하여 이미지 높이를 자동으로 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!