Image CSS

Images CSS

Ce chapitre présentera comment utiliser CSS pour mettre en page des images.

Image arrondie

<!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>

Image miniature

我们使用 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>

Réponse Responsive images

Les images réactives s'adapteront automatiquement aux écrans de différentes tailles.

Dans l'exemple, vous pouvez vérifier l'effet en réinitialisant la taille du navigateur :

<!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>

Image de style carte

<!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>

Album d'images réactif

<!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 (modal)

Cet exemple montre comment combiner CSS et JavaScript pour restituer des images ensemble.

Tout d'abord, nous utilisons CSS pour créer une fenêtre modale (boîte de dialogue), qui est masquée par défaut.

Ensuite, nous utilisons JavaScript pour afficher la fenêtre modale. Lorsque nous cliquons sur l'image, l'image sera affichée dans la fenêtre pop-up

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Image CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]