CSS에서 이미지를 중앙에 배치하고 조정하는 방법

모바일 단말기는 기본적으로 캐러셀 이미지, 제품 표지 이미지 등과 같은 이미지 적응 처리가 필요합니다. 사용자가 게시한 이미지는 지정된 크기가 아닙니다. 그럼 모바일 개발을 하는 친구들은 이미지 적응에 어려움을 겪나요? 실제로 CSS에는 object-fit 속성이 있어 이미지를 조정하는 데 매우 편리할 수 있습니다. 이 글은 편집자가 편집한 CSS의 이미지를 조정하는 방법입니다.

그럼 어떻게 할 수 있나요? CSS3에 object-fitattribute

각 속성 값에 대해 이야기해보자

1 .object -fit:cover;

이 속성 값은 모바일 단말기에서 가장 일반적으로 사용되는 값입니다. 아래 예를 봅시다

<img src="/static/imghwm/default1.png"  data-src="http://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg"  class="lazy"   alt="">

//css部分
img{
    border: 2px red solid;
	width: 300px;    
	height: 300px;
    object-fit: cover;
}

cover는 중앙에 내용 전체를 채우는 것이고, 한쪽은 완전히 채워지고 나머지는 잘려지게 됩니다. (여기에 채우는 것은 반드시 전체 내용을 채울 것입니다)

Rendering 원본 이미지 크기 비율

2.object-fit: fill;

fill은 채우기입니다. 내용 전체를 채우되 내용을 초과하지 않습니다. 한쪽을 채웠을 때 여전히 공백이 있으면 전체 내용을 채울 수 있도록 끌어올립니다. 🎜#

contain은 한 면을 채우면 내용을 초과하지 않으며, 이미지 비율을 늘리거나 변경하지 않으므로 전체 내용을 채울 때 사진이 부족할 때 반드시 있어야 합니다. 한쪽은 비워두었습니다.

렌더링

위의 원본 그림 보기

4.object-fit: scale-down;

scalc-down은 포함된 느낌 동일합니다. 차이점이 없는 경우 공유해 주시기 바랍니다.

5.object-fit: none;

none은 기본 속성 값이며 아무것도 없습니다.

요약: 호환성 측면에서 기본적으로 모든 모바일 브라우저는 이전 버전을 제외하고 호환됩니다. 위의 내용이 그다지 선명하지 않다면, 설정한 화면 비율의 내용 중간에 아주 작은 것부터 아주 작은 것까지 점차 확대(채워짐)되는 그림에 비유할 수 있습니다. 아직도 이해가 되지 않는다면, 아마도 나의 언어 구성이 충분하지 않은 것일 수도 있습니다. 그런 다음 공식 문서

[추천 과정:

css video Course

]

으로 이동합니다.

위 내용은 CSS에서 이미지를 중앙에 배치하고 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!