CSS images
CSS images
This chapter will introduce how to use CSS to layout images.
Rounded corner picture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img {
border-radius: 20px;
}
</style>
</head>
<body>
<h2>圓角圖片</h2>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</body>
</html>Run the program and try it
Oval image:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>橢圓形圖片</h2>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</body>
</html>Run the program to try it
Thumbnail
We use the border attribute to create thumbnails.
<!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>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</body>
</html>Run the program to try it
We use the border property to create thumbnails. Add a link outside the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>縮略圖作為連接</h2>
<p>我們使用 border 屬性來創(chuàng)建縮略圖。在圖片外層添加一個鏈接。</p>
<p>點(diǎn)擊圖片查看效果：</p>
<a target="_blank" href="/upload/course/000/000/006/580b170b612ba140.jpg">
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</a>
</body>
</html>Run the program and try it
Responsive pictures
Responsive pictures will automatically adapt Comes with screens of various sizes. If you need to freely scale the image, and the enlarged size of the image is not larger than its original maximum value, you can use the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>響應(yīng)式圖片</h2>
<p>響應(yīng)式圖片會自動適配各種尺寸的屏幕。</p>
<p>通過重置瀏覽器大小查看效果:</p>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Norway" width="1000" height="300">
</body>
</html>Run the program and try it
Picture Modal(Modal)
This example demonstrates how to combine CSS and JavaScript to render images 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:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>圖片模態(tài)框</h2>
<p>本實例演示了如何結(jié)合 CSS 和 JavaScript 來一起渲染圖片。</p><p>
首先，我們使用 CSS 來創(chuàng)建 modal 窗口 (對話框), 默認(rèn)是隱藏的。<p>
<p>然后，我們使用 JavaScript 來顯示模態(tài)窗口，當(dāng)我們點(diǎn)擊圖片時，圖片會在彈出的窗口中顯示：</p>
<img id="myImg" src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Northern Lights, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// 獲取模態(tài)窗口
var modal = document.getElementById('myModal');
// 獲取圖片模態(tài)框，alt 屬性作為圖片彈出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// 獲取 <span> 元素，設(shè)置關(guān)閉模態(tài)框按鈕
var span = document.getElementsByClassName("close")[0];
// 點(diǎn)擊 <span> 元素上的 (x), 關(guān)閉模態(tài)框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>Run the program and try it
