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>