CSS 來佈局圖片

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種 語言動態地對網頁各元素進行格式化。

例項
圓角圖片:
img {
    border-radius: 8px;
}

例項
橢圓形圖片:
img {
    border-radius: 50%;
}

我們使用 border 屬性來建立縮圖。

例項
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

例項
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);
}

例項
.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%;
    }
}

本例項演示瞭如何結合 CSS 和 JavaScript 來一起渲染圖片。

首先，我們使用 CSS 來建立 modal 視窗 (對話方塊), 預設是隱藏的。

然後，我們使用 JavaScript 來顯示模態視窗，當我們點選圖片時，圖片會在彈出的視窗中顯示：

例項
// 獲取模態視窗
var modal = document.getElementById('myModal');
// 獲取圖片模態框，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;
}
// Get the  element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on  (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}

原文地址：