Tailwind Image

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