Bootstrap Vue Image Component - CoreUI

Trang chủ » W-100 Bootstrap Vue » Bootstrap Vue Image Component - CoreUI

Có thể bạn quan tâm

  • Home
  • Docs
  • GitHubGitHub
  • TwitterTwitter
ExpandCollapse
  • Getting started
    • Introduction
  • Layout
    • Breakpoints
    • Columns
    • Containers
    • Grid
    • Gutters
  • Forms
    • Overview
    • Form control
    • Select
    • Checks & radios
    • Range
    • Floating labels
    • Input group
    • Layout
    • Validation
  • Components
    • Accordion
    • Alert
    • Badge
    • Breadcrumb
    • Buttons
    • Button Group
    • Card
    • Carousel
    • Chart
    • Close Button
    • Collapse
    • Dropdown
    • Icon
    • Image
    • List Group
    • Modal
    • Navs & Tabs
    • Navbar
    • Offcanvas
    • Pagination
    • Placeholder
    • Popover
    • Progress
    • Spinner
    • Table
    • Toast
    • Tooltip
Bootstrap Vue Image Component

Bootstrap Vue image component with responsive behavior (so it's never become larger than their parent element) and special styles.

On this page
  • Responsive images
  • Image thumbnails
  • Aligning images
  • API
    • CImage

Responsive images #

Images in Bootstrap Vue are made responsive with fluid property. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

<CImage fluid src="/images/vue.jpg" /> 1

Image thumbnails #

In addition to our border-radius utilitiesopen in new window, you can use propthumbnail to give an image a rounded 1px border appearance.

<CImage rounded thumbnail src="/images/vue400.jpg" width="200" height="200"/> 1

Aligning images #

Align images with the align property.

<div class="clearfix"> <CImage align="start" rounded src="/images/vue400.jpg" width="200" height="200"/> <CImage align="end" rounded src="/images/vue400.jpg" width="200" height="200"/> </div> 1234<div class="clearfix"> <CImage align="center" rounded src="/images/vue400.jpg" width="200" height="200"/> </div> 123<div class="text-center"> <CImage rounded src="/images/vue400.jpg" width="200" height="200"/> </div> 123

API #

CImage #

import { CImage } from '@coreui/bootstrap-vue' // or import CImage from '@coreui/bootstrap-vue/src/components/image/CImage' 123

Props #

Prop nameDescriptionTypeValuesDefault
alignSet the horizontal aligment.string'start', 'center', 'end'-
fluidMake image responsive.boolean-
roundedMake image rounded.boolean-
thumbnailGive an image a rounded 1px border appearance.boolean-

Từ khóa » W-100 Bootstrap Vue