거의 아무것도하지 않음으로써 Aspect-Ratio 크기의 이미지를 얻었다면 어떻게해야합니까?

이미지로드 스터 더 터치 해결 : 브라우저 기본 기능을 사용하여 원활한 이미지 디스플레이를 달성하십시오.

웹 페이지 이미지가 천천히로드되어 페이지가 말더듬이되는 상황을 만난 적이 있습니까? 이는 일반적으로 브라우저가 이미지의 종횡비를 알지 못하므로 이미지를 표시하기에 충분한 공간을 예약 할 수 없기 때문입니다. 이 기사는 브라우저 기본 기능을 활용하여 추가 코드 없이이 문제를 해결하는 우아한 솔루션을 탐색합니다.

웹 페이지에서 800x600 픽셀 이미지를 사용하고 너비를 width: 100%; . 이미지의 실제 디스플레이 너비는 컨테이너 크기에 따라 다르지만 종횡비는 동일하게 유지됩니다. 문제는 이미지가로드되기 전에 브라우저가 이미지의 높이를 결정할 수 없으므로 페이지가 말더듬을 만듭니다.

해결책 : width 와 height 특성을 활용하십시오

놀랍게도, 그냥 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174511723380054.jpg" class="lazy" alt="거의 아무것도하지 않음으로써 Aspect-Ratio 크기의 이미지를 얻었다면 어떻게해야합니까?"> 더 나아가 : 브라우저 기본 스타일 지원

보다 이상적인 솔루션은 브라우저 자체 가이 기능을 지원하도록하는 것입니다. 한 가지 방법은 CSS의 aspect-ratio 속성을 활용하는 것이지만 개발자는 수동으로 추가해야하므로 편리하지 않습니다. 더 나은 솔루션은 브라우저 사용자 에이전트 스타일 시트에 기본 종횡비 설정을 추가하는 것입니다.

 IMG, 비디오 {
  Aspect-Ratio : att (너비) / att (높이);
}

이러한 방식으로 이미지에 width 와 height 속성이있는 한 브라우저는로드 지연을 피하기 위해 올바른 공간을 자동으로 계산하고 예약 할 수 있습니다.

이 접근법의 장점은 다음과 같습니다.

1. 이해하고 구현하기 쉬운 : 새로운 속성이나 복잡한 CSS 트릭을 배울 필요가 없습니다.
2. 광범위한 적용 가능성 : 많은 웹 사이트에서 이미 기존 코드를 수정하지 않고 width 및 height 속성을 사용하고 있습니다.
3. 개발자 친화적 : 새롭고 오래된 개발자는 쉽게 이해하고 사용할 수 있습니다.

현재 일부 브라우저는이 솔루션의 타당성을 테스트하고 있습니다. 이것은 웹 개발을 크게 단순화하고 사용자 경험을 향상시킬 것입니다.

위 내용은 거의 아무것도하지 않음으로써 Aspect-Ratio 크기의 이미지를 얻었다면 어떻게해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!