CSS做好布局加入图片,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%; } }

图片 Modal(模态)

本实例演示了如何结合 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"; }