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>