Изображение растягивается, когда место в карусель - PullRequest
Новая
       8

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

0 голосов
/ 03 января 2019

Я использую карусель, в которую я положил 5 изображений разной высоты и ширины, но есть некоторые проблемы с изображениями, некоторые изображения растянуты, некоторые изображения являются центром карусели.

Я хочу, чтобы все изображения помещались внутри карусели.

Вот мой код: 

  <div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
  <div uib-slide ng-repeat="img in vm.temp" index="$index">
      <img ng-src="{{img.src}}" height="650">
  </div>

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Вы можете использовать свойство object-fit в CSS , чтобы определить, как изображение должно помещаться в контейнер.Вы можете использовать «Заполнить», «Содержать», «Обложка», «Нет» или «Уменьшить». 

.the-carousel img {
  object-fit: cover;
}
0 голосов
/ 03 января 2019

Вы можете использовать атрибут " background-image " тега div .И установите для атрибута " background-size " значение содержать или cover .Например: 

.owl-carousel .item img
{
    display: none;
}

.owl-carousel .item img + div
{
    display: block;
    width: 100%;
    height: 210px; /* option */
    background-repeat: no-repeat;
    background-position: center center; /* 0 0 */
    background-size: contain; /* or cover */
}
<div class="owl-carousel owl-theme">
	<div class="item">
		<img src="http://example.com/" alt="" />
		<div style="background-image:url('http://example.com/')"></div>
	</div>
	<div class="item">
		<img src="http://example.com/" alt="" />
		<div style="background-image:url('http://example.com/')"></div>
	</div>
	<div class="item">
		<img src="http://example.com/" alt="" />
		<div style="background-image:url('http://example.com/')"></div>
	</div>
	<div class="item">
		<img src="http://example.com/" alt="" />
		<div style="background-image:url('http://example.com/')"></div>
	</div>
	<div class="item">
		<img src="http://example.com/" alt="" />
		<div style="background-image:url('http://example.com/')"></div>
	</div>
	<div class="item">
		<img src="http://example.com/" alt="" />
		<div style="background-image:url('http://example.com/')"></div>
	</div>
</div>
...