CSS 이미지

이 장에서는 CSS를 사용하여 이미지를 레이아웃하는 방법을 소개합니다.

둥근 모서리 이미지

<!DOCTYPE html> 
<html>
 <head> 
 <meta charset="utf-8" />
 <style>
 #divcss5{ margin:0px auto} 
 #divcss5 img{ border-radius:50%;} 
 </style>
    </head>
     <body> 
     <div id="divcss5">
     <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" width="400" height="500"/>
     </div>
      </body>
       </html>

Thumbnails

我们使用 border 属性来创建缩略图。
  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
</style>
</head>
<body>
<h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p>
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png"  alt="Paris" width="400" height="300">
</body>
</html>

반응형 이미지

반응형 이미지는 다양한 화면 크기에 자동으로 맞춰집니다.

예제에서는 브라우저 크기를 재설정하여 효과를 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>
<h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p>
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Norway" width="1000" height="300">
</body>
</html>

카드 스타일 사진

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body {margin:25px;}
div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}
div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
  <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>
<div class="polaroid">
  <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Norway" style="width:100%">
  <div class="container">
    <p>Northern Lights in Norway</p>
  </div>
</div>
</body>
</html>

반응형 사진 앨범

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div.img {
    border: 1px solid #ccc;
}
div.img:hover {
    border: 1px solid #777;
}
div.img img {
    width: 100%;
    height: auto;
}
div.desc {
    padding: 15px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>
<h2 style="text-align:center">响应式图片相册</h2>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>
</body>
</html>

Picture Modal(모달)

이 예 CSS와 JavaScript를 결합하여 이미지를 함께 렌더링하는 방법을 보여줍니다.

먼저 CSS를 사용하여 기본적으로 숨겨져 있는 모달 창(대화 상자)을 만듭니다.

그런 다음 JavaScript를 사용하여 모달 창을 표시합니다. 이미지를 클릭하면 팝업 창에 이미지가 표시됩니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } </style> </head> <body> <h2>缩略图</h2> <p>我们使用 border 属性来创建缩略图。</p> <img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Paris" width="400" height="300"> </body> </html>

제출하다 코드 재설정

자동운전