markdown Css响应圆形图像

Posted 2021-05-06

html, body { width: 100%; height: 100%; background-color: #000; margin: 0; padding: 0 20px; box-sizing: border-box; }

h1 { color: #ff0082; text-align: center; font-size: 3vw; text-transform: uppercase; letter-spacing: 5px; padding: 30px 0; }

h2 { color: #fff; font-size: 2vw; letter-spacing: 2px; }

ul, li { list-style: none; margin: 0; padding: 0; }

ul { display: -webkit-flex; display: flex; text-align: center; justify-content: space-between; margin-bottom: 30px; }

ul li { width: 15%; text-align: center; position: relative; padding-bottom: 15%; border-radius: 50%; overflow: hidden; background-color: #ff0082; }

ul li img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }

ul li h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; margin: 0; padding: 0; font-size: 1.5vw; }

<h1>Responsive Circle Image Demo</h1>
<h2>Image Demo</h2>
<ul>
  <li><img src="http://www.placekitten.com/300/320"></li>
  <li><img src="http://www.placekitten.com/300/320"></li>
  <li><img src="http://www.placekitten.com/300/320"></li>
  <li><img src="http://www.placekitten.com/300/320"></li>
  <li><img src="http://www.placekitten.com/300/320"></li>
  <li><img src="http://www.placekitten.com/300/320"></li>
</ul>
<h2>Text Demo</h2>
<ul>
  <li><h3>Sample</h3></li>
  <li><h3>Sample</h3></li>
  <li><h3>Sample</h3></li>
  <li><h3>Sample</h3></li>
  <li><h3>Sample</h3></li>
  <li><h3>Sample</h3></li>
</ul>

Css Responsive Circle Image
---------------------------


A [Pen](https://codepen.io/jksakura/pen/ZByGjb) by [Jake Zhong](https://codepen.io/jksakura) on [CodePen](https://codepen.io).

[License](https://codepen.io/jksakura/pen/ZByGjb/license).