CSS images
CSS images
This chapter will introduce how to use CSS to layout images.
Rounded Corner Image
<!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>Thumbnail
我們使用 border 屬性來創(chuàng)建縮略圖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h2>縮略圖</h2>
<p>我們使用 border 屬性來創(chuàng)建縮略圖。</p>
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Paris" width="400" height="300">
</body>
</html>Response Style pictures
Responsive pictures will automatically adapt to screens of various sizes.
In the example, you can see the effect by resetting the browser size:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>響應(yīng)式圖片</h2>
<p>響應(yīng)式圖片會自動適配各種尺寸的屏幕。</p>
<p>通過重置瀏覽器大小查看效果:</p>
<img src="http://imgstore.cdn.sogou.com/app/a/100540002/503008.png" alt="Norway" width="1000" height="300">
</body>
</html>Card-style picture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>響應(yīng)式卡片</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>Responsive picture album
<!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">響應(yīng)式圖片相冊</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)
This example demonstrates how to combine CSS and JavaScript to render pictures together.
First, we use CSS to create a modal window (dialog box), which is hidden by default.
Then, we use JavaScript to display the modal window. When we click on the image, the image will be displayed in the pop-up window
