一、引入资源文件

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

二、不同尺寸的图片

<!-- 迷你图片 -->
<div class="ui block header">ui-mini-image</div>
<div class="ui mini image">
    <img src="./img/image.png" alt="">
</div>
<!-- 较小图片 -->
<div class="ui block header">ui-tiny-image</div>
<div class="ui tiny image">
    <img src="./img/image.png" alt="">
</div>
<!-- 小图片 -->
<div class="ui block header">ui-small-image</div>
<div class="ui small image">
    <img src="./img/image.png" alt="" title="小图片">
</div>
<!-- 中等图片 -->
<div class="ui block header">ui-medium-image</div>
<div class="ui medium image">
    <img src="./img/image.png" alt="" title="中等图片">
</div>
<!-- 大图片 -->
<div class="ui block header">ui-large-image</div>
<div class="ui large image">
    <img src="./img/image.png" alt="">
</div>
<!-- 较大图片 -->
<div class="ui block header">ui-big-image</div>
<div class="ui big image">
    <img src="./img/image.png" alt="">
</div>
<!-- 巨大图片 -->
<div class="ui block header">ui-huge-image</div>
<div class="ui huge image">
    <img src="./img/image.png" alt="">
</div>
<!-- 最大图片 -->
<div class="ui block header">ui-massive-image</div>
<div class="ui massive image">
    <img src="./img/image.png" alt="">
</div>            

三、不同状态的图片

<!-- 隐藏的图片 -->
<div class="ui block header">ui-hidden-image</div>
<div class="ui hidden image">
    <img src="./img/image.png" alt="">
</div>
<!-- 禁止的图片 -->
<div class="ui block header">ui-disabled-image</div>
<div class="ui disabled small image">
    <img src="./img/image.png" alt="">
</div>

四、有边框的图片

<img src="./img/white-image.png" alt="" class="ui bordered small image">

五、适应容器的图片

<img src="./img/image.png" alt="" class="ui fluid image">

六、圆角的图片

<img src="./img/image.png" alt="" class="ui rounded medium image">

七、圆形的图片

<img src="./img/square-image.png" alt="" class="ui circular small image">

八、位置居中的图片

<img src="img/paragraph.png" class="ui centered aligned image">

九、同一尺寸图片组

<div class="ui small images">
    <img src="img/image.png" class="ui image">
    <img src="img/image.png" class="ui image">
    <img src="img/image.png" class="ui image">
    <img src="img/image.png" class="ui image">
</div>

十、实际效果

原文作者：絷缘
作者邮箱：zhiyuanworkemail@163.com
原文地址：https://zhiyuandnc.github.io/6S9G53Ktp/
版权声明：本文为博主原创文章，转载请注明原文链接作者信息