모바일 인터넷의 발달로 인해위챗 마케팅휴대폰의 인기가 높아졌다.생활필수 도구.
웹사이트를 구축템플릿을 사용하는 것이 좋습니다.워드프레스(WordPress)적응형 테마:
- 워드프레스 테마 개발자가 워드프레스 테마 페이지를 디자인할 때 HTML 5 이미지 적응형 화면을 잘 만들지 않았다면...
- 모바일 장치에서 웹 사이트를 탐색할 때 매우 보기 흉한 사진 정렬이 잘못되고 사용자 경험이 매우 열악합니다!
CSS 이미지 적응형은 무엇을 의미합니까?
CSS 이미지 적응은 CSS 코드를 통해 html 웹 페이지의 이미지를 만드는 것을 의미합니다.
- 다른 장치의 너비와 높이에 자동으로 적응합니다.
- img 태그는 자동으로 비례하여 크기가 조정됩니다.
다음,천 웨이량CSS img 비례 스케일링 코드를 공유하겠습니다 ^_^
CSS 이미지 높이 및 너비 적응형 코드
HTML에 이미지 삽입:
너비와 높이를 고정하는 대신 이미지를 작은 화면 크기에 맞게 조정하려는 경우.
WordPress 테마의 style.css 파일에 다음 코드를 추가할 수 있습니다 ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }여기 성명서max-width최대 너비 규칙
- 모든 이미지가 최대 100%로 표시되도록 합니다(즉, 자신의 이미지만큼만 표시할 수 있음).
- 이 시점에서 이미지를 포함하는 요소(예: 이미지를 포함하는 body 또는 div)가 이미지의 고유 너비보다 작으면 이미지가 사용 가능한 최대 공간을 채우도록 크기가 조정됩니다.
width:auto;자동 너비를 의미
\9 해킹 CSS를 작성하는 방법입니다.
- 이런 식으로 "\9"가 일반 CSS 코드에 추가되고 IE 브라우저만 인식할 수 있으며 다른 브라우저는 이 명령문을 무시합니다.
- 이것은 브라우저 차별화를 달성하여 호환 가능한 브라우저의 목적을 가능하게 합니다.
너비: 100%를 사용하지 않는 이유는 무엇입니까?
이미지의 자동 크기 조정을 달성하기 위해 더 일반적으로 사용되는 너비 속성을 사용할 수도 있습니다.width：100％.
그러나 이 규칙은 여기에 적용되지 않습니다.
- 이 규칙은 컨테이너만큼 넓게 보이게 만들기 때문입니다.
- 컨테이너가 이미지보다 훨씬 넓은 경우 이미지가 불필요하게 늘어납니다.
注意 事项
CSS 선택기란 무엇입니까? 클래스와 id의 차이점은 무엇입니까?다음 튜토리얼은 ▼
모바일 웹사이트는 페이지에 맞게 MP4 비디오를 어떻게 재생합니까?▼ 아래 링크를 클릭해주세요 ▼
희망 첸 웨이량 블로그( https://www.chenweiliang.com/ ) "웹 페이지 HTML 5 이미지 적응형 화면 img 비례 크기 조정 코드"를 공유하여 도움이 되었습니다.
이 기사의 링크를 공유하는 것을 환영합니다:https://www.chenweiliang.com/cwl-964.html
최신 업데이트를 받으려면 Chen Weiliang 블로그의 Telegram 채널에 오신 것을 환영합니다!
📚 이 가이드에는 엄청난 가치가 담겨 있습니다. 🌟이것은 흔치 않은 기회입니다. 놓치지 마세요! ⏰⌛💨
당신이 원한다면 공유하고 좋아하십시오!
당신의 공유와 좋아요는 우리의 지속적인 동기 부여입니다!