Question

我正在尝试创建一个带有一些图像的响应式轮播。有两种图像：
1.较小的图像
2.大图像。

我希望较小的图像（无论大小）可以拉伸和填充，而较大的图像则可以调整大小，或者如果不可能，则应裁剪并调整大小的图像按原样填充。另外，如您所见，我设置了max-height:500px并不是响应式的好习惯，但是如果我不这样做，那么大图像看上去会比我想要的大。

因此，基本上，我正在寻找某种方式来调整大小并使其适合旋转木马，而与图像的尺寸无关。现在，我可以裁剪较大的图像，但无法拉伸和填充较小的图像。答案对我不起作用。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox"
        style="width:100% !important; height:100% !important; max-height:500px !important;">

        <div class="carousel-item active"
            style="background-size: cover !important; background-position: 50% 50% !important; min-width: 100% !important; min-height: 100% !important;">
            <img class="d-block w-100 h-100"
                src="{{ v.url }}">
        </div>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

对于该问题，我几乎尝试了所有答案，例如background-size: cover等，对我来说都不起作用。因此，请在标记为重复之前或参考其他答案之前进行一次测试。我不认为是否需要，但该转盘位于网格的列中。
如果您不使用js就可以做到这一点，因为我不是前端开发人员，那会很棒，我只想修复它而又不浪费时间。

Answer 1

如果您将图像用作背景而不是background-size: cover标签，那么

img可以在这里工作。这是一个示例：

const img = [
  'https://api.adorable.io/avatars/100/a@adorable.png',
  'https://api.adorable.io/avatars/200/b@adorable.png',
  'https://api.adorable.io/avatars/400/c@adorable.png',
  'https://api.adorable.io/avatars/800/d@adorable.png',
  'https://api.adorable.io/avatars/1200/e@adorable.png'
];

let current = 0;

const prev = document.querySelector('a[data-slide="prev"]');
const next = document.querySelector('a[data-slide="next"]');
const image = document.querySelector('.carousel-item.active img');
const picture = document.querySelector('.carousel-item.active');

const update = () => {
  picture.style.backgroundImage = 'url(' + img[current] + ')';
  image.src = img[current];
}

const goBack = () => {
  current = Math.max(0, current - 1);
  update();
}

const goForward = () => {
  current = Math.min(img.length - 1, current + 1);
  update();
}

prev.addEventListener('click', goBack);
next.addEventListener('click', goForward);
update();

.carousel {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 95vh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  align-items: stretch;
  text-align: center;
}

.carousel-inner {
  grid-column: 1/3;
}

.carousel-item.active {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

img.sr-only {
  visibility: hidden;
}

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">

    <div class="carousel-item active">
      <img class="sr-only d-block w-100 h-100" src="https://api.adorable.io/avatars/285/abott@adorable.png">
    </div>

  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

无法根据轮播尺寸调整轮播图片的尺寸

1 个答案: