가변 비율 레이아웃의 유체 이미지

요즘 독립적 인 레이아웃에서 유체 이미지를 처리하는 것은 매우 쉽습니다. 그러나보다 복잡한 인터페이스의 경우이 카드와 같은 반응 형 요소 안에 이미지를 배치해야합니다.

이 이미지 가 비대형 콘텐츠이며 장식에만 사용된다고 가정하십시오. background-image 사용하는 데 좋습니다. 그리고이 이미지에는 객체가 포함되어 있으므로 반응 적으로 레이아웃시 부품을 자르지 않으므로 background-size: contain 선택합니다.

문제는 다음과 같습니다. 모바일 장치 에서이 카드 방향은 이미지를 상단에 바꾸어 수직으로 변하고 수직이됩니다. 우리는 모든 유형의 CSS 레이아웃 기술을 사용하여이를 수행 할 수 있으며 CSS 그리드 또는 탄성 상자를 사용하는 것이 가장 좋습니다.

그러나 더 작은 화면을 테스트 할 때는 contain 으로 인해 다음과 같은 결과를 얻습니다.

이것은 이상적이지 않습니다. 이미지는 종횡비를 유지하도록 크기가 크며 세부 사항을 자르지 않으며 이미지가 중요하고 cover 않아야하는 경우 background-size 를 변경할 수 없습니다.

이 시점에서 다음 시도는 친숙 할 수 있습니다. 배경이 아닌 이미지를 인라인으로 배치하십시오.

데스크탑 장치에서는 제대로 작동합니다.

모바일 장치에도 좋습니다.

그러나 작은 화면에서는 모든 고정 크기로 인해 이미지의 비율이 왜곡됩니다.

우리는 이미지, 카드 및 탄성 속성을 조정하여 앞뒤로 조정하는 데 몇 시간을 소비 할 수 있습니다. 또는 우리는 ...

기본 내용을 배경에서 분리하십시오

이것은 반응 형 이미지에서 유연성과 유연성을 높이기위한 기초입니다. 모든 경우에 불가능하지만, 많은 경우에, 특히 그러한 접근 방식이 미리 계획되는 경우 설계에 약간의 노력으로 달성 할 수 있습니다.

다음 반복에서 딸기 이미지를 투명한 배경에 배치하고 CSS를 사용하여 래스터 이미지에 파란색을 설정합니다. 샘플 공간을 조화하여 데모에서 뷰포트 크기를 계속 사용하십시오!

스타일을주의 깊게 살펴보면 이미지가 포함 된 DIV에 패딩을 추가하므로 딸기가 가장자리에 너무 가까워지지 않습니다. 우리는이 패딩과 함께 얼마나 가깝거나 멀리 있는지 완전히 통제 할 수 있습니다.

또한 외부 카드 포장에서 패딩을 보상하기 위해 마이너스 마진을 사용합니다. 그렇지 않으면 이미지 주위에 빈칸이 있습니다.

인라인 이미지에 객체 적합 속성을 사용하십시오

이전 데모는 작동하지만 여전히이 접근법을 개선 할 수 있습니다. 지금까지 우리는 이미지가 의미가없는 내용이라고 가정했지만이 레이아웃에서는 이미지 일러스트레이션이 단순한 장식 이상일 수도 있습니다.

이 경우, 우리는 실제로 데이터 손실과 동일하기 때문에 이미지가 자르기를 절대적으로 자르기를 원하지 않습니다. 이를 방지하기 위해 배경 대신 이미지를 object-fit 으로 배치하는 것이 가장 좋습니다.

우리는 배경에서 딸기를 추출했는데, 이제는 인라인 요소 인 배경이지만 동일한 이미지 Div에서 배경색을 유지합니다.

마지막으로, object-fit: contain 100% 너비를 포함하면 창을 크기를 조정하고 딸기의 종횡비를 유지할 수 있습니다. 그러나이 접근법의 단점은 이미지의 데스크탑 버전에 고정 높이를 설정해야한다는 것입니다. 그렇지 않으면 설정 너비의 비율을 따릅니다 (레이아웃을 줄이면 레이아웃이 변경됨). 다양한 양의 텍스트 로이 카드를 생성 해야하는 경우 텍스트가 랩되어 너무 제한적으로 만들 수 있습니다.

곧 출시 예정 : 종횡비

위의 문제에 대한 솔루션은 곧 다가오는 aspect-ratio 속성을 통해 구현 될 수 있습니다. 예를 들어 요소의 고정 스케일을 설정할 수 있습니다.

 .el {
  종횡비 : 16 / 9;
}

즉, 고정 높이를 제거하고 계산 한 종횡비로 바꿀 수 있습니다. 예를 들어, 마지막 예제의 데스크탑 중단 점의 크기는 다음과 같습니다.

 .Image {
  / * ... */
  높이 : 184px;
  너비 : 318px;
}

aspect-ratio 사용하여 높이 선언을 삭제하고 가장 가까운 184 스케일을 얻도록 계산할 수 있습니다.

 .Image {
  / * ... */
  너비 : 318px; /* 참조 너비*/
  높이 : 끊임없는; /* 미디어 쿼리 외부의 높이 재설정*/
  종횡비 : 159 / 92; /* 184px 높이에 가까운*/
}

자세한 내용은이 기사에서 다가오는 속성을 탐색 할 수 있습니다.

마지막으로, 가변 스케일 레이아웃에서 신뢰할 수있는 반응 형 이미지를 달성하는 몇 가지 방법이 있습니다. 그러나이 일을 더 쉽게 만들고 더 나은 것보다 더 나은 것은 CSS에 반드시 존재하는 것은 아닙니다. 전경을 배경에서 분리하는지 (우리가했던 것처럼) 이미지를 조정하거나 가장자리의 상당 부분이 잘린 경우에도 여전히 작동하는 특정 이미지를 선택하는 것만으로는 간단 할 수 있습니다.

위 내용은 가변 비율 레이아웃의 유체 이미지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!