Question

我正在使用轮播，在其中放置了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>

Answer 1

您可以使用 div 标签的“ 背景图像”属性。并将“ 背景尺寸”属性设置为包含或覆盖。例如：

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

Answer 2

您可以使用object-fit property in CSS来定义图像在容器中的放置方式。您可以使用填充，包含，覆盖，无填充或缩小比例。

.the-carousel img {
  object-fit: cover;
}

放入旋转木马时图像被拉伸

2 个答案: