Tailwind Image
2020-05-30 本文已影响0人
JunChow520
image type
常用图片的效果依靠是圆角和阴影属性，可以产生很多不同的效果，比如圆形图片更多是用于社交人物头像展示。
| 类型 | 描述 |
|---|---|
| 圆角图片 | rounded shadow |
| 圆形图片 | rounded-full shadow |
| 圆角凸起 | rounded shadow-lg |
| 圆形凸起 | rounded-full shadow-lg |
普通效果（simple image）
simple image
<img src="http://source.unsplash.com/800x800" class="max-w-full h-auto border-none rounded shadow align-middle"/>
| 样式 | 属性 |
|---|---|
| max-w-full | max-width:100%; |
| h-auto | height:auto; |
| border-none | border-style:none; |
| rounded | border-radius:.25rem; |
| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); |
| align-middle | vertical-align:middle; |
特殊效果
effect
| 样式 | 效果 | 属性 |
|---|---|---|
| rounded | border-radius: 0.25rem; | 圆角边框 |
| rounded-full | border-radius: 9999px; | 圆形边框 |
| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); | 普通阴影 |
| shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | 凸起漂浮 |
圆形边框（circle）
圆形包裹的图片经常做人物的头像使用，主要是使用rounded-full工具类实现。
<img src="http://source.unsplash.com/800x800/?profile" class="max-w-full h-auto border-none rounded-full shadow align-middle"/>
凸起效果（raised）
通过对圆角图片或圆形图片增大阴影shadow-lg以实现图片凸起效果，感觉图片漂浮起来。
<img src="http://source.unsplash.com/800x800/?woman" class="max-w-full h-auto border-none rounded-full shadow-lg align-middle"/>
图片自适应（responsive）
普通图标的自适应
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="container mx-auto my-12">
<div class="flex flex-wrap justify-center">
<div class="px-4 w-6/12 sm:w-3/12">
<img src="http://source.unsplash.com/800x800/?woman" class="max-w-full h-auto border-none rounded shadow align-middle"/>
</div>
<div class="px-4 w-6/12 sm:w-3/12">
<img src="http://source.unsplash.com/800x800/?woman" class="max-w-full h-auto border-none rounded shadow-lg align-middle"/>
</div>
<div class="px-4 w-6/12 sm:w-3/12">
<img src="http://source.unsplash.com/800x800/?woman" class="max-w-full h-auto border-none rounded-full shadow align-middle"/>
</div>
<div class="px-4 w-6/12 sm:w-3/12">
<img src="http://source.unsplash.com/800x800/?woman" class="max-w-full h-auto border-none rounded-full shadow-lg align-middle"/>
</div>
</div>
</div>
代码展示地址
https://codepen.io/junchow/pen/JjYgNRO?editors=1000
