그림
반응형 웹 디자인 - Pictures
width 속성 사용
width 속성을 100%로 설정하면 이미지는 상한 및 하한 범위에 따라 반응형 기능을 구현합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
<p>调整浏览器窗口查看图像是如何扩展的。</p>
</body>
</html>인스턴스 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
위 예제에서는 이미지가 원본 이미지보다 커집니다. max-width 속성을 사용하면 이 문제를 아주 잘 해결할 수 있습니다.
최대 너비 속성을 사용하세요
최대 너비 속성이 100%로 설정된 경우 이미지는 원래 크기보다 절대 커지지 않습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
<p>调整浏览器大小，在宽度小于 460px 时查看图片比例变化。</p>
</body>
</html>인스턴스 실행»
클릭 "인스턴스 실행" 버튼 온라인 인스턴스 보기
웹페이지에 사진 추가
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>调整浏览器窗口大小查看内容变化。</p>
</div>
</body>
</html>인스턴스를 실행하시겠습니까?
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
배경 이미지
배경 이미지의 크기를 조정하거나 이에 반응하여 크기를 조정할 수 있습니다.
다음은 세 가지 방법입니다.
1. background-size 속성이 "contain"으로 설정된 경우 배경 이미지가 콘텐츠 영역에 비례하여 조정됩니다. 이미지는 비율을 유지합니다.
CSS 코드는 다음과 같습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
</style>
</head>
<body>
<p>调整浏览器大小查看效果。</p>
<div></div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
2. 배경- 크기 속성이 "100% 100%"로 설정되고 배경 이미지가 전체 영역을 덮도록 확장되는 경우:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>调整浏览器大小查看效果。</p>
<div></div>
</body>
</html>Run Instance»
"실행"을 클릭합니다. 인스턴스' 버튼을 누르면 온라인 인스턴스를 볼 수 있습니다
3. background-size 속성을 "cover"로 설정하면 배경 이미지가 배경 영역을 완전히 덮을 수 있을 만큼 충분히 큰 크기로 확장됩니다. 이 속성은 이미지의 비율을 유지하므로 배경 이미지의 일부는 배경 앵커 영역에 표시될 수 없습니다.
CSS 코드는 다음과 같습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
background-size: cover;
border: 1px solid red;
}
</style>
</head>
<body>
<p>调整浏览器大小查看效果。</p>
<div></div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
기기마다 다른 이미지가 표시됩니다
크게 크기의 이미지를 표시할 수 있습니다. 큰 화면에서는 작동하지만 작은 화면에서는 잘 표시되지 않습니다. 작은 화면에 큰 이미지를 로드할 필요는 없습니다. 이는 로딩 속도에 영향을 미치기 때문입니다. 따라서 미디어 쿼리를 사용하여 다양한 장치에 따라 다양한 이미지를 표시할 수 있습니다.
다음의 크고 작은 사진이 다른 장치에 표시됩니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
/* For width smaller than 400px: */
body {
background-repeat: no-repeat;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
}
</style>
</head>
<body>
<p style="margin-top:360px;">调整浏览器宽度，背景图片在小于 400 px 时将改变。</p>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
You 미디어를 사용할 수 있습니다. 쿼리의 min-device-width는 브라우저 너비 대신 장치 너비를 감지하는 min-width 속성을 대체합니다. 브라우저 크기를 조정해도 이미지 크기는 변경되지 않습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
/* For device width smaller than 400px: */
body {
background-repeat: no-repeat;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
}
</style>
</head>
<body>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
HTML5 <picture> 요소
HTML5의 <picture> 요소는 여러 그림을 설정할 수 있습니다.
브라우저에서는
및| 函数 |  |  |  |  |  |
| :visited | 不支持 | 38.0 | 38.0 | 不支持 | 25.0 |
<picture><video><audio> 요소를 지원합니다. 다른 리소스를 구성할 수 있습니다.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php 中文网</title> </head> <body> <picture> <source srcset="https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg" media="(max-width: 400px)"> <source srcset="https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg"> <img src="https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg" alt="Flowers" style="width:auto;"> </picture> <p>调整浏览器宽度和高度，背景在宽度小于 400px 时将改变。 </p> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
srcset 속성은 필수입니다. , 이미지 리소스가 정의됩니다.
media 속성은 선택 사항이며 미디어 쿼리의 CSS @media 규칙 에서 찾을 수 있습니다.
<picture> 요소를 지원하지 않는 브라우저의 경우 대신 <img> 요소를 정의할 수도 있습니다.
