在 Bootstrap 轮播中拉伸和填充图像

轮播中拉伸和填充图像

关注

发信

关注(28)粉丝(399)

本文介绍了在 Bootstrap 轮播中拉伸和填充图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 bootstrap carousal 并且在图像高度和宽度方面存在一些问题.即使我在 img 属性中定义它，它仍然显示为原始分辨率.以下是我正在使用的代码:


<div id="myCarousel";class =轮播幻灯片"><div class="carousel-inner"><div class="item active"><img src=http://placehold.it/650x450/aaa&text=Item 3";高度=300"宽度=300"/>
<div class="item"><img src=http://placehold.it/350x350/aaa&text=Item 3"高度=300"宽度=300"/>

<div class="item"><img src=http://placehold.it/350x350/aaa&text=Item 3"高度=300"宽度=300"/>

<a class="left carousel-control";href="#myCarousel";数据幻灯片=上一个"><span class="icon-prev"></span></a><a class="右轮播控制";href="#myCarousel";数据幻灯片=下一个"><span class="icon-next"></span></a>

这是(不像 object-fit 在 IE 中缺乏支持、Edge 和 Android

小提琴演示

HTML 更改:

<div class="item" style="background-image: url(http://placehold.it/400x400);"><img src="http://placehold.it/400x400"/>

CSS 更改:

.carousel {/* 任何尺寸都可以，它可以响应最大宽度 */宽度:300px；高度:350px；}.carousel-内{/* 确保您的 .items 将获得正确的高度 */高度:100%；}.物品 {背景尺寸:封面；背景位置:50% 50%；宽度:100%；高度:100%；}.item img {可见性:隐藏；}

I am using bootstrap carousal and having some problem with image height and width. Even though I define it in the img attribute it still displays as original resolution. Following is the code I am using:

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

Here is demo of that.

What should I do to fill the image in a certain height and width regardless of its original resolution?

解决方案

You can use background-size: cover, while still having hidden <img> element for SEO and semantic purposes. Single img url is used both times, so there's no additional loading, and background-size is well supported (unlike object-fit which lacks support in IE, Edge and Android < 4.4.4).

Fiddle Demo

HTML change:

<div class="item" style="background-image: url(http://placehold.it/400x400);">
  <img src="http://placehold.it/400x400"/>
</div>

CSS change:

.carousel {
  /* any dimensions are fine, it can be responsive with max-width */
  width: 300px;
  height: 350px;
}

.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.item {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.item img {
  visibility: hidden;
}

这篇关于在 Bootstrap 轮播中拉伸和填充图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 09:19