img 요소에 CSS를 사용할 수 있나요?
- 藏色散人원래의
- 2021-01-11 09:26:053213검색
img 요소는 CSS로 스타일을 지정할 수 있습니다. 설정 방법은 다음과 같습니다. 1. CSS 너비와 같은 속성을 통해 img 크기를 설정합니다. 2. CSS의 테두리 속성을 사용하여 img 이미지에 테두리를 추가합니다. a 태그를 설정하여 이미지를 링크로 설정합니다. 4. text-align 속성을 사용하여 이미지의 가로 정렬 등을 설정합니다.
이 튜토리얼의 운영 환경: 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 사진을 링크로 사용합니다
사진을 링크로 사용합니다. 즉, 3499910bf9dac5ae3c52d5ede7383485 안에 넣습니다.
코드 예시는 다음과 같습니다.
<!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>위 코드는 링크 3499910bf9dac5ae3c52d5ede7383485에 이미지를 넣고 클릭하면 점프 동작을 구현할 수 있습니다.
이미지를 링크에 넣을 때 이미지에 불필요한 테두리가 있을 수 있다는 점에 유의하세요. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!