CSS를 사용하여 화면에 따라 이미지 크기를 변경하는 방법: 1. "width height auto" 속성을 사용하여 이미지 크기를 조정합니다. 2. "max-width max-height" 속성을 사용하여 최대 너비와 높이를 설정합니다. .
이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.
권장: "css 비디오 튜토리얼"
때로는 화면 크기에 따라 이미지의 크기가 조정되기를 원할 때가 있습니다. 두 가지 상황은 다음과 같습니다.
단일 이미지 크기 조정
이미지 크기는 상자 내에서 조정됩니다
알몸 사진 크기 조정
<style type="text/css">
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
</style>
<body>
<img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
</body>
상자 안의 사진
<style type="text/css">
#box {
width: auto; /* 盒子也要自动缩放 */
height: auto;
max-width: 600px;
max-height: 500px; /* 盒子的高度,需要大于图片100%宽度时 图片的高度 */
border: 5px solid yellow;
}
img {
width: auto;
height: auto;
max-width: 100%; /* 只要宽度100% 结合前面 auto就可以了 */
}
</style>
<body>
<div id="box">
<img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
下面的文字
</div>
</body>
ps:
1 너비 높이 자동을 사용하여 확대/축소
2. 최대 너비를 높이로 설정하세요. , 100%는 원래 최대값을 의미합니다.
위 내용은 CSS의 화면에서 이미지 크기를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
