홈 > 웹사이트 구축 도구 > 프런트 엔드 기술
이미지에 자동으로 적응 크기 컨테이너를 열고 필요한 컨트롤의 그림 크기를 그림을 방지 하기 위해 생산 시간에서 매우 일반적인 함수는, CSS를 사용 하 여 제어 하는 적응형 크기 그림 수 우리?
여기 두 가지 방법으로 제공 하는, 개인적으로 첫 번째 방법은 것이 좋습니다.
방법 1
CSS 컨트롤 그림 크기 코드
< 스타일 형식을 "Text/css" = >
그림 없음
테두리: 0;
여백: 0;
패딩: 0;
최대-폭: 200px;
폭: 식 (그것 > 200?) 200px ": this.width);
최대-높이: 200px;
높이: 식 (this.height > 200?) 200px ": this.height);
}
</스타일 >
< 몸 >
< img src = "A.jpg"/ >
</바디 >
방법 2
< 스타일 형식을 "Text/css" = >
Div
{
최대-폭: 600px;
폭: 600px;
폭: 식 (document.body.clientwidth > 600?) 600px ":"자동");
오버플로우: 숨겨진;
}
</스타일 >
최대-폭: 600px; IE7, FF 및 다른 비 IE 브라우저에서 600px의 최대 폭. 하지만 i e 6에서 유효 하지 않습니다.
폭: 600px; 모든 브라우저에서 그림의 크기는 600px; >
사진 크기 600px 보다 큰 경우에, 그것은 자동으로 600px로 감소 된다. I e 6에서 유효 합니다.
< img src = "B.jpg"/ >
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
