CSS 이미지 크기를 설정하는 방법-CSS 튜토리얼-php.cn

CSS 이미지 크기를 설정하는 방법

coldplay.xixi

풀어 주다： 2023-01-05 16:12:28

원래의

45117명이 탐색했습니다.

Css 이미지 크기 설정 방법: 1. img 태그를 통해 도입된 이미지 크기 설정, 구문은 [img{width:150px;height:60px}]입니다. 2. [배경 크기] 속성을 사용하여 크기를 지정합니다. 배경 이미지.

CSS 이미지 크기를 설정하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS 이미지 크기 설정 방법:

1. img 태그를 통해 도입된 이미지 크기 설정

여기서 주목해야 할 점은 너비와 높이를 직접 설정할 수 있다는 것입니다. HTML img 태그 내에서 너비 및 높이 값 설정에는 html 단위가 필요하지 않으며 기본값은 PX 픽셀입니다.

img 태그에서 높이와 너비를 설정하는 것의 장점은 직관적입니다. 기사에 그림을 삽입할 때 이 방법을 사용하면 그림의 높이와 너비를 제어할 수 있습니다. 단점은 그림 목록의 형식이 이와 같다는 것입니다. , HTML 코드가 많이 추가되므로 일률적으로 수정하기가 불편합니다.

CSS에서 img 이미지 크기를 설정하는 구문:

img{width:150px;height:60px}

로그인 후 복사

여기서 CSS 너비를 150px로, CSS 높이를 60px로 설정합니다. CSS 스타일의 CSS 너비와 CSS 높이 값에는 단위가 있습니다. 유닛을 가져오는 것을 잊지 마세요.

img에 직접 스타일을 설정하면 전체 웹페이지에서 이미지의 너비와 높이가 제어됩니다. 지정된 객체 내에서 이미지 너비와 높이 스타일을 제어하기 위해 일반적으로 img 앞에 객체 CSS 이름을 추가합니다.

2. CSS로 배경 이미지 크기를 설정합니다.

background-size 속성은 배경 이미지의 크기를 지정합니다.

문법:

background-size: length|percentage|cover|contain;

로그인 후 복사

예:

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>
</body>
</html>

로그인 후 복사

렌더링:

CSS 이미지 크기를 설정하는 방법