标签：总结 img 学习 5.26 1px 实例 radius border 图片

CSS 图片

本章节将为大家介绍如何使用 CSS 来布局图片。

---

圆角图片

实例

圆角图片:

img {
    border-radius: 8px;
}
尝试一下 »

实例

椭圆形图片:

img {
    border-radius: 50%;
}
尝试一下 »

---

缩略图

我们使用 border 属性来创建缩略图。

实例

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

<img src="paris.jpg" alt="Paris">
尝试一下 »

实例

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

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>
尝试一下 »

---

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

实例中，你可以通过重置浏览器大小查看效果:

 

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

实例

img {
    max-width: 100%;
    height: auto;
}

标签：总结,img,学习,5.26,1px,实例,radius,border,图片
From： https://www.cnblogs.com/clh628/p/17471970.html