CSS는 다양한 크기의 이미지에 대해 균일한 이미지 크기를 어떻게 보장할 수 있나요?

CSS를 사용하여 다양한 이미지에 대해 균일한 이미지 크기 조정

매력적인 이미지 갤러리를 만들려면 원래 크기에 관계없이 일관된 크기의 이미지가 필요한 경우가 많습니다. . 이는 높이와 너비가 다른 이미지로 작업할 때 문제가 될 수 있습니다. 그러나 CSS는 모든 이미지를 균일하게 표시하는 솔루션을 제공합니다.

해결책:

모든 이미지의 크기를 100x100픽셀로 설정하려면 다음 CSS를 활용하세요. 코드:

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

구현:

1. Float 속성: 이는 이미지를 수평으로 정렬하고 서로 옆에 표시되도록 합니다. 인라인 배열을 만듭니다.
2. 너비 및 높이 속성: 너비와 높이를 고정된 값으로 명시적으로 설정합니다. 이 경우 둘 다 100px입니다.
3. object-fit 속성: 지정된 범위 내에서 전체 이미지가 표시되도록 합니다. 치수. 가로 세로 비율을 유지하면서 그에 따라 이미지의 크기를 조정하고 자릅니다.

예:

이 개념을 설명하려면 다음 HTML 및 CSS 코드를 고려하세요.

<img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="CSS는 다양한 크기의 이미지에 대해 균일한 이미지 크기를 어떻게 보장할 수 있나요?" >
<img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="CSS는 다양한 크기의 이미지에 대해 균일한 이미지 크기를 어떻게 보장할 수 있나요?" >
<img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="CSS는 다양한 크기의 이미지에 대해 균일한 이미지 크기를 어떻게 보장할 수 있나요?" >

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

이 코드는 이미지를 높이와 너비가 일정한 정사각형 축소판으로 렌더링합니다. 100px. 이미지는 원래 비율을 유지하면서 해당 치수에 맞게 크기가 조정되고 잘립니다.

위 내용은 CSS는 다양한 크기의 이미지에 대해 균일한 이미지 크기를 어떻게 보장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!