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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!