Image 图片布局
响应式图片
使用 vus-img
类可以让图片支持响应式布局。
<img class="vus-img" src="demo.jpg" />
宽度全屏
使用 vus-img-full
类可以让图片宽度以 100%
显示。
<img class="vus-img-full" src="demo.jpg" />
满屏图片
使用 vus-img-wh-full
类可以让图片宽度和高度以 100%
显示。
<img class="vus-img-wh-full" src="demo.jpg" />
背景图片
使用 vus-bg-size
类,设置背景图片样式为:background-size: 100% 100%;
。
<div class="vus-bg-size" style="background-image: url(demo.jpg)"></div>
使用 vus-bg-size-contain
类,设置背景图片样式为:background-size: contain;
。
<div class="vus-bg-size-contain" style="background-image: url(demo.jpg)"></div>
使用 vus-bg-size-cover
类,设置背景图片样式为:background-size: cover;
。
<div class="vus-bg-size-cover" style="background-image: url(demo.jpg)"></div>
使用 vus-bg-size-x
类,设置背景图片样式为:background-size: 100% auto;
。
<div class="vus-bg-size-x" style="background-image: url(demo.jpg)"></div>
使用 vus-bg-size-y
类,设置背景图片样式为:background-size: auto 100%;
。
<div class="vus-bg-size-y" style="background-image: url(demo.jpg)"></div>