semantic-ui 图片

1、基础样式

　　方式一：因为图片是使用img标签，所以直接将class加载img标签中即可。不过要注意的是，class中要指定是ui image。

　　方式二：使用一个span或者div将img标签包裹，然后ui image的class加载div或者span里面，img中只写一个src即可

?

1 2 3 4 5 6 7

<!-- 方式一 --> <img src="demo.png"  class="ui image">   <!-- 方式二 --> <div class="ui image">     <img src="demo.png"> </div>

　　

2、设置大小

　　直接在class中加一个表示大小的值即可。

?

1	<img src="demo.png"  class="ui small image">

　　

3、图片链接

　　和普通的html中的图片链接没区别，不过需要在img或者a标签中加一个ui image的class即可。

?

1 2 3 4 5 6 7 8 9

<!-- 方式一 --> <a href="https://www.google.com">     <img src="demo.png"  class="ui image"> </a>   <!-- 方式二 --> <a href="https://www.google.com"  class="ui image">     <img src="demo.png" > </a>

　　

4、隐藏图片

　　直接在class中加一个hidden即可。

?

1	<img src="demo.png"  class="ui hidden image">

　　

5、禁用图片

　　即向class中加一个disabled。

?

1	<img src="demo.png"  class="ui disabled image">

　　

 

6、图片加边框

　　边框可以在class中加一个bordered即可。

?

1	<img class="ui bordered image" src="demo.png">

　　

7、图片加圆角

　　class中加一个rounded即可 

?

1	<img class="ui rounded image" src="demo.png">

　　

8、图片圆形化

　　class中指定为circular即可，需要注意的是，如果图片是长方形的话，加上circular之后，会变成椭圆；如果图片是正方形的话，加上circular之后就会变成圆了。

?

1 2	<img class="ui circular image" src="demo.png"> <img class="ui circular image" src="demo_2.png">

　　

 

9、图片居中显示

　　居中显示时，图片独占一行，其他内容处于图片之下。

　　其实就是使用center而已，但是semantic-ui中不只是center，而是要centered才行 。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div>   <img class="ui centered image" src="demo.png">   <p>     Te eum doming eirmod, nominati pertinacia argumentum ad his.     Ex eam alia facete scriptorem, est autem aliquip detraxit at.     Usu ocurreret referrentur at, cu epicurei appellantur vix.     Cum ea laoreet recteque electram, eos choro alterum definiebas in.     Vim dolorum definiebas an. Mei ex natum rebum iisque.   </p>   <p>     Te eum doming eirmod, nominati pertinacia argumentum ad his.     Ex eam alia facete scriptorem, est autem aliquip detraxit at.     Usu ocurreret referrentur at, cu epicurei appellantur vix.     Cum ea laoreet recteque electram, eos choro alterum definiebas in.     Vim dolorum definiebas an. Mei ex natum rebum iisque.   </p> </div>

　　

10、图片和文字在同一行

　　将img标签写在p标签之内，然后加spaced类，否则图片不会和文字在同一行。　　

　　注意图片的大小，不要设置太大。

?

1 2 3 4 5 6 7 8

<p>     <img class="ui spaced mini image" src="demo.png">     Te eum doming eirmod, nominati pertinacia argumentum ad his.     Ex eam alia facete scriptorem, est autem aliquip detraxit at.     Usu ocurreret referrentur at, cu epicurei appellantur vix.     Cum ea laoreet recteque electram, eos choro alterum definiebas in.     Vim dolorum definiebas an. Mei ex natum rebum iisque. </p>

　　

 

11、图片浮动

　　图片浮动可以让文字包围图片，要在class中加floated和left或者right。

　　注意，img标签可以在p标签之内，也可以和p标签同级。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div>     <img class="ui floated left small image" src="demo.png">     <p>         Te eum doming eirmod, nominati pertinacia argumentum ad his.         Ex eam alia facete scriptorem, est autem aliquip detraxit at.         Usu ocurreret referrentur at, cu epicurei appellantur vix.         Cum ea laoreet recteque electram, eos choro alterum definiebas in.         Vim dolorum definiebas an. Mei ex natum rebum iisque.         Te eum doming eirmod, nominati pertinacia argumentum ad his.         Ex eam alia facete scriptorem, est autem aliquip detraxit at.         Usu ocurreret referrentur at, cu epicurei appellantur vix.         Cum ea laoreet recteque electram, eos choro alterum definiebas in.         Vim dolorum definiebas an. Mei ex natum rebum iisque.     </p> </div>

　　

 

12、图片组

　　图片组就是一组图片，外观上和平时的html + css没什么区别，但是使用semantic-ui的图片组，在屏幕大小变化时，会自适应，重新排列。

?

1 2 3 4 5

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