Images, Thumbnails, and Aspect Ratios
Image Shapes
Use
.img-rounded,.img-circle, or.img-thumbnailon<img>to quickly style the borders.
Image Aspect Ratios
Sometimes you can't control the size of an image, define a specific size for your images with aspect-ratios. The base class
aspect-ratiomaintains a 1 to 1 ratio relative to its container's width, add classaspect-ratio-verticalto maintain a 1 to 1 ratio relative to its container's height.Use
aspect-ratio-3-to-2,aspect-ratio-4-to-3,aspect-ratio-8-to-5, oraspect-ratio-16-to-9to maintain the specific ratio relative to its container or create your own by settingpadding-bottomto the ratio you want e.g. 2 to 1.aspect-ratio-2-to-1 { padding-bottom: 50% }.
16:9
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-3-to-2">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-4-to-3">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-8-to-5">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-16-to-9">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
16:9
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-vertical">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-vertical aspect-ratio-3-to-2">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-vertical aspect-ratio-4-to-3">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-vertical aspect-ratio-8-to-5">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>
<div class="col-md-3 col-xs-3">
<div class="aspect-ratio aspect-ratio-vertical aspect-ratio-16-to-9">
<img alt="thumbnail" src="/images/thumbnail_hot_air_ballon.jpg">
</div>
</div>Images inside
aspect-ratioare aligned bottom by default. Use classaspect-ratio-toporaspect-ratio-middleto align top or vertically center, respectively.
Images inside
aspect-ratio-verticalare aligned left by default. Use classaspect-ratio-rightoraspect-ratio-centerto align right or horizontally center, respectively.
