이미지 가로 세로 비율이 올바르게 완료되었습니다 😍
width: %100 로 설정되기 때문입니다. 그러나 이 시점에서 이미지의 크기는 그다지 중요하지 않습니다. 중요한 것은 이미지가 로드되면 DOM 리플로우가 발생한다는 것입니다. 충분히 명확하지 않습니까? 예를 들어 살펴보겠습니다.문제
이것을 실제로 봅시다. Glitch을 사용하여 신속하게 데모를 만들겠습니다. 3개
div가 필요합니다. 그 중 2개는 텍스트를 포함하고 그 사이에 이미지를 포함합니다.<head>
<title>Image aspect ratio</title>
<style>
.image-container {
width: 500px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<h1>Image aspect ratio done right</h1>
<div >
<p>
This is the first bit of text here!
</p>
</div>
<div class="image-container">
<img src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2018/09/08/Pictures/_7ae928c8-b34e-11e8-bb15-a1f88311a832.jpg"
width="960" height="540"/>
</div>
<div>
<p>
This is the second bit of text here!
</p>
</div>
</body>
this Glitch app에서 전체 페이지를 볼 수 있습니다.
지금 느린 네트워크에서 사이트를 로드하면(고속 네트워크에서는 큰 차이를 볼 수 없음) 페이지가 다음과 같이 로드됩니다.
먼저 두 단락이 서로 가깝게 표시되고 네트워크 요청이 완료되면 이미지가 간격을 채우고 DOM 리플로우가 수행되어 두 번째 단락을 아래로 밀어냅니다. 얼마나 슬플까😥?
솔루션 #1
가장 먼저 할 수 있는 일은 이미지 높이를
auto 로 설정하는 것입니다. 이것은 FireFox와 Chrome에 도입된 새로운 기능입니다. 이렇게 하면 이미지 속성에서 메타데이터를 찾아 필요한 높이를 계산하고 해당 공간을 예약하도록 브라우저에 지시합니다. 따라서 우리가 해야 할 일은 다음과 같습니다.<style>
img {
width: 100%;
}
</style>
그리고 동일한 네트워크에서 페이지를 다시 로드합니다. 페이지가 다음과 같이 로드되는 것을 볼 수 있습니다.
얼마나 좋은가요 😍?
솔루션 #2
well
aspect-ratio 이라는 새로운 CSS 속성을 도입하는 new proposal in a draft state 이 있습니다. 이를 통해 속성을 img 태그에 추가하고 width 및 height 속성을 사용하여 예약할 공간을 브라우저에 알릴 수 있습니다.img {
aspect-ratio: attr(width) / attr(height);
}
많은 사람들이 이미 이미지에
width 및 height 속성을 넣었기 때문에 매우 간단하고 읽기 쉬우며 웹에 있는 대부분의 이미지를 지원한다는 이점이 있습니다.반면에 HTML과 CSS로 시작하는 주니어 개발자는 무슨 일이 일어나고 있는지, 어떤 일을 제대로 하기 위해 해야 할 일이 얼마나 적은지 이해하는 데 아무런 문제가 없습니다.
이것은 Firefox, Chrome 및 Edge에서 구현되었습니다.
요약
이미지 종횡비를 얻는 것은 특히 사이트의 사용자 경험에 영향을 미치는 경우 매우 중요합니다. 따라서 해당 문제를 해결하는 방법을 아는 것도 중요합니다. 이 기사를 즐기셨기를 바라며 다음 시간까지 👋🏼.
Reference
이 문제에 관하여(이미지 가로 세로 비율이 올바르게 완료되었습니다 😍), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yashints/image-aspect-ratio-done-right-2ibo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
