简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 본문

img 요소에 CSS를 사용할 수 있나요?

藏色散人
풀어 주다： 2022-12-30 11:11:28
원래의
3211명이 탐색했습니다.

img 요소는 CSS로 스타일을 지정할 수 있습니다. 설정 방법은 다음과 같습니다. 1. CSS 너비와 같은 속성을 통해 img 크기를 설정합니다. 2. CSS의 테두리 속성을 사용하여 img 이미지에 테두리를 추가합니다. a 태그를 설정하여 이미지를 링크로 설정합니다. 4. text-align 속성을 사용하여 이미지의 가로 정렬 등을 설정합니다.

img 요소에 CSS를 사용할 수 있나요?

이 튜토리얼의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

추천: css 비디오 튜토리얼

1. CSS는 img 이미지의 크기를 제어합니다

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
  width:120px;
  height:100px;
}
</style> 
</head> 
<body> 
<img src="mytest/div+css/border.jpg"/>
</body> 
</html>
로그인 후 복사

위 코드는 img 이미지의 길이와 너비를 각각 120px과 100px로 설정합니다.

단, CSS를 사용하여 이미지 크기를 대략적으로 설정하면 변형이 발생할 수 있다는 점에 유의하세요.

이미지가 변형되는 것을 원하지 않는다면 이미지의 가로 세로 비율에 주의하세요.

2.img 사진에 테두리 추가

실제 적용에서는 사진에 테두리 효과가 추가될 수 있습니다.

이는 CSS 테두리 속성을 사용하여 달성할 수 있습니다.

코드 예시는 다음과 같습니다. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
    width:220px;
    height:100px;
    border:2px solid blue;
}
</style> 
</head> 
<body> 
<img src="mytest/div+css/border.jpg"/>
</body> 
</html>
로그인 후 복사

위 코드는 img 이미지에 너비 2px의 파란색 테두리를 추가합니다.

테두리에 대한 자세한 내용은 CSS 테두리 장을 참조하세요.

3.img 사진을 링크로 사용합니다

사진을 링크로 사용합니다. 즉, 안에 넣습니다.

코드 예시는 다음과 같습니다. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
    width:40px;
    height:20px;
    border:2px solid blue;
    border:none;
}
</style> 
</head> 
<body> 
<a href="#"><img src="mytest/div+css/border.jpg"/></a>>
</body> 
</html>
로그인 후 복사

위 코드는 링크 에 이미지를 넣고 클릭하면 점프 동작을 구현할 수 있습니다.

이미지를 링크에 넣을 때 이미지에 불필요한 테두리가 있을 수 있다는 점에 유의하세요. border:none만 추가하세요.

4. 이미지의 가로 정렬 설정

예시로 이미지의 가로 가운데 정렬을 설정하면 됩니다. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
div{
  width:300px;
  height:300px;
  text-align:center;
  background-color:#ccc;
}
img{
  width:100px;
  height:100px;
}
</style> 
</head> 
<body> 
<div><img src="mytest/div+css/border.jpg"/></div>
</body> 
</html>
로그인 후 복사

text-align 속성을 사용하여 가로 정렬을 설정합니다. 이미지.

이 속성은 이미지 요소 자체가 아닌 이미지 컨테이너 요소의 IQ에 설정된다는 점에 유의하세요.

5. 이미지의 수직 정렬 설정

아래에서는 일반적인 코드가 데모로 사용됩니다.

텍스트 상자와 인증 코드는 일반적으로 가로로 정렬되어야 더 아름답게 보입니다.

코드 예시는 다음과 같습니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
div img{ 
  vertical-align:middle
}
input{
  height:52px;
}
</style>
</head>
<body>
<div><input type="text"/><img src="mytest/demo/1.jpg"></div>
</body>
</html>
로그인 후 복사

위 코드는 텍스트 상자와 인증 코드의 수직 정렬 효과를 얻을 수 있습니다.

핵심 코드는 다음과 같습니다. 

div img{ 
  vertical-align:middle
}
로그인 후 복사

위 코드는 그림 요소 자체에 설정해야 합니다.

위 내용은 img 요소에 CSS를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css img
원천：php.cn
이전 기사：CSS 클래스는 무엇을 의미하나요? 다음 기사：CSS에서 중국어 글꼴을 설정할 수 없는 경우 해결 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
앵커 포인트 내부의 img에 대해 테두리 반경이 작동하지 않습니다. 다음 HTML 코드를 사용하고 있습니다: <aclass="-video-detail-qualifiers-branding"><img...
에서 2024-04-06 17:20:25
0
1
347
for 루프는 무작위로 1에서 0으로 이동합니다. 기본적으로 페이지가 새로 고쳐질 때마다 for 루프는 1에서 0으로 변경될 가능성이 있습니다. 왜 이런 일이 발생하는지 모르겠지만 내 이미지가 서로 겹쳐지는 방식...
에서 2024-04-06 16:48:14
0
1
393
모바일 크기 화면에서 단락을 왼쪽으로 이동하기 위한 CSS 및 HTML 방법 일반 16:9 컴퓨터 화면에서는 왼쪽에 텍스트가 있고 오른쪽에 이미지가 있어 완벽하게 보입니다. 그러나 더 작은 화면(예: 휴대폰 크기)의 경우 원하는 대로 단락...
에서 2024-04-04 20:25:22
0
1
330
React 구성 요소 내부 함수의 예기치 않은 출력 두 개의 이미지(IMG 및 IMG2)를 가져왔습니다. IMG는 뷰포트 너비가 600px보다 작을 때 표시되고, 뷰포트 너비가 600px보다 크거나 같으면 다른 것...
에서 2024-04-03 00:17:44
0
1
285
HTML에서 connect-src 콘텐츠 보안 정책에 대한 와일드카드를 설정하는 방법은 무엇입니까? html中我有这个<metahttp-equiv="Content-Security-Policy"content="default-src's...
에서 2024-04-02 16:12:49
0
1
414
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！