semantic-ui中图片的处理

2024-02-27 17:18:15

1、基础样式

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

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

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

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

2、设置大小

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

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

3、图片链接

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

<!-- 方式一 -->
<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即可。

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

5、禁用图片

　　即向class中加一个disabled。

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

6、图片加边框

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

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

7、图片加圆角

　　class中加一个rounded即可

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

8、图片圆形化

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

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

9、图片居中显示

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

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


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

10、图片和文字在同一行

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

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


    <img class="ui spaced mini image" src="demo.png"

11、图片浮动

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

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

	<img class="ui floated left small image"

12、图片组

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

<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>

转载于:https://www.cnblogs.com/-beyond/p/8984548.html

码农公寓