CSS에서 이미지 크기를 제어하는 ​​방법 소개

黄舟
풀어 주다: 2017-07-26 13:35:52
원래의
2307명이 탐색했습니다.

1. 웹 페이지 제작 기술 예시 솔루션: CSS를 사용하여 이미지의 적응형 크기 제어

자동 이미지 적응은 제작 중에 이미지가 열리는 것을 방지하기 위해 매우 일반적인 기능입니다. 컨테이너. 필요한 제어입니다. CSS를 사용하여 이미지 크기를 조정하도록 제어할 수 있나요?

우리는 비교적 간단한 솔루션을 생각해냈습니다. 완벽하지는 않지만 요구 사항이 그다지 높지 않은 경우 이미 요구 사항을 충족할 수 있습니다. 아래 코드를 살펴보겠습니다.

p img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
로그인 후 복사

 ◎ max-width:600px; IE7, FF 및 기타 IE가 아닌 브라우저에서 최대 너비는 600px입니다. 하지만 IE6에서는 작동하지 않습니다.

 ◎ 너비:600px; 모든 브라우저에서 이미지 크기는 600px입니다.

 ◎ 이미지 크기가 600px보다 크면 자동으로 600px로 줄어듭니다. IE6에서 유효합니다.

 ◎overflow:hidden; 이미지 크기 조절 실패로 인한 늘어나거나 변형되는 것을 방지하기 위해 남는 부분을 숨깁니다.


2. 때로는 사진이 너무 커서 웹페이지의 깔끔한 레이아웃이 손상될 수 있습니다. 이때 CSS를 사용하여 이미지의 높이나 너비를 비례적으로 압축할 수 있습니다.

img,a img{ 
border:0; 
margin:0; 
padding:0; 
max-width:590px; 
width:expression(this.width>590?"590px":this.width); 
max-height:590px; 
height:expression(this.height>590?"590px":this.height); 
}
로그인 후 복사

이런 식으로 이미지의 높이나 너비가 590px을 초과하면 비율에 맞게 590px로 압축됩니다. 원본 크기를 초과하지 않으면 590px로 압축되어 표시됩니다.

위 내용은 CSS에서 이미지 크기를 제어하는 ​​방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!