it-swarm.com.ru

Растянуть и заполнить изображение в карусели Bootstrap

Привет, ребята, я использую bootstrap карусель и у меня возникли проблемы с высотой и шириной изображения. Несмотря на то, что я определяю его в атрибуте img, он по-прежнему отображается в исходном разрешении, ниже приведен код, который я использую

<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>

Вот демо из этого.

Что я должен сделать, чтобы заполнить изображение определенной высоты и ширины независимо от его исходного разрешения.

11
Mike Ross

Вы можете использовать background-size: cover, при этом все еще имея скрытый элемент <img> для SEO и семантических целей. Одиночный img url используется оба раза, поэтому дополнительной загрузки нет, и background-size хорошо поддерживается (в отличие от object-fit, для которого не хватает поддержки в IE, Edge и Android <4.4.4).

Fiddle Демо

Изменение HTML:

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

Изменение CSS:

.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;
}
9
Matija Mrkaic

Вы можете поместить высоту в css и добавить! Важное, потому что bootstrap переопределяет ваш рост с помощью auto, а object-fit: cover; будет работать как фоновый размер скрипка

.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}
5
عارف بن الأزرق

Вы определяете размер ваших заполнителей в URL, а не в атрибутах HTML для элементов.

Также проверьте .img-отзывчивый класс Bootstrap здесь .

Обновление

Это изменилось на .img-fluid в Bootstrap 4 Alpha и Beta

2
plushyObject

То, что у вас есть ширина в заполнителе, не должно иметь значения, поместите это в ваш CSS и это должно работать, если это работает, вы можете попробовать удалить!.

 .carousel img {
        width:100% !important;
        min-width:100 !important;
        height: auto;
    }

.img-responseive в bootstrap просто установит ширину на 100%, поэтому в случае, если исходные пропорции изображения меньше ширины карусели, они не будут заполнены.

2
Mathias Asberg

Сделайте так, чтобы ваше изображение занимало 100% размера контейнера . Используя высоту: 100% и ширину: 100%.

Затем ограничьте размер, установив значения контейнера в желаемый размер.

.item{
  height:300px;
  width:350px;
}
.item img{
  width:100%;
  height:100%;
}

Надеюсь, это поможет.

2
jmag

Карусель будет расти, чтобы соответствовать родительскому элементу по умолчанию, который в вашем случае .col-md-6 и .col-sm-6. Если вы хотите, чтобы размер карусели составлял 300х300, задайте класс/идентификатор карусели или любые другие размеры, которые вы хотите.

Затем после этого начальная загрузка применяет height: auto; к изображениям в карусели, что переопределит атрибут height, указанный в HTML. Это можно сделать двумя способами - либо сделать height (и для согласованности, width тоже) встроенным style в теге img, если вы хотите сохранить его в HTML, либо применить высоту к изображениям карусели в вашем файле CSS.

body {
    margin: 10px;
}
.carousel, .carousel img {
  width: 300px;
}
.carousel img {
  height: 300px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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/400x400">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x450">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x350">
      </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>

2
Michael Coker

Добавьте это к CSS файла. Это ограничит высоту и ширину изображения и, следовательно, выровняет его.

.item img { max-height: 300px; max-width: 350px; }

0
Shalinee SIngh

если вы можете использовать простой javaScript, вот обновленная скрипка https://jsfiddle.net/a1x1dnaa/2/

я использовал изображение в качестве фона и удалил тег <img>.

jQuery(function(){
  var items = $('.item');
  items.each(function() {
    var item = $(this);
    img = item.find("img");
    img.each(function() {
        var thisImg = $(this);
        url = thisImg.attr('src');
        thisImg.parent().attr('style', 'background-image:url('+url+')');
        thisImg.remove();
    });
  });
});

тогда вы можете использовать некоторые стили, чтобы изображение заполняло

.item {
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 200px; //you can use the height as you need 
}

это должно работать для вас.

если вы не хотите использовать javaScript, вы можете просто использовать изображение как встроенный стиль 

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

и использовать тот же CSS, что и выше.

0
Lucian
.item img{
min-width: 300px;
min-height: 300px;
overflow: hidden;}
.item{
width: 300px;
height: 300px;
overflow: hidden;
}

вы попробуйте этот CSS и небольшие изменения в HTML. Я использовал другое изображение SRC для лучшего прояснения.

здесь обновленная скрипка

0
Amit Kumar

Я столкнулся с той же проблемой . Что сработало для меня, вместо того, чтобы использовать img, я использовал div и background-image для css

HTML:

<div class="carousel-inner">
  <div class="item active">
    <div class="carousel-img"></div>
  </div>
</div>

CSS:

.carousel-inner, .item {
    height: 100%;
}

.carousel-img {
    background-image: url('http://placehold.it/400x400');
    width: 100%;
    height:100%;
    background-position:center;
    background-size:cover;
}
0
Char
  1. Добавьте этот класс в каждый атрибут изображения

class="img-responsive center-block"

Например:

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />
  1. Добавить этот стиль

    .active img{
      width: 100%;
    }
    
0
Gnanasekar S

Попробуйте удалить стиль из тега img:

<!--from-->

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
<!--to-->
<img src="http://placehold.it/350x350/aaa&text=Item 3"/>

0
NanoCellMusic

Вы можете сделать это с помощью следующих стилей:

.carousel-inner .item{
  width: 600px; /* Any width you want */
  height: 500px; /* Any width you want */
}
.carousel-inner .item img{
  min-width: 100%;
  min-height: 100%;
}

Устанавливая min-* для атрибутов изображения, мы гарантируем, что у нас есть по крайней мере 100% как width, так и height.

Обновлено JSFiddle

0
Suthan Bala