使滑块图像响应 Bootstrap

Question

嗨，我有一个布局，在网页上看起来像我想要的那样，但图像没有响应。 一栏有一段文字，另一栏是幻灯片。 如果我使用class="img-circle"它会使图像比我想要的小。 当我缩小窗口时，它会切掉一些图像。 我怎样才能让他们做出反应？ 我尝试使用旋转木马引导程序，但我无法让它们并排对齐。

 $(".slideshow > div:gt(0)").hide(); setInterval(function () { $('.slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('.slideshow'); }, 4000);

 .slideshow { margin: 45px auto; position: relative; width: 490px; height: 320px; padding: 10px; /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);*/ } .slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="d-inline h3">orem ipsum dolor </div> <div class="d-inline h3 float-lg-right"><a href="/home/heritageprojects">orem ipsum dolor </a></div> <div class="row mb-5"> <div class=" col-sm-5 col-md-4 col-lg-8 px-0 px-xl-4 mx-auto"> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus feugiat leo. Donec tristique consequat odio vel imperdiet. Mauris efficitur a sapien et interdum. Morbi lacinia, justo quis pulvinar condimentum, nibh turpis vestibulum nulla, nec facilisis nisl ex et ipsum. Pellentesque maximus, ligula in dictum blandit, lectus est sodales nisi, ac tempor ante tellus eu turpis. Nam vulputate augue ut accumsan egestas. Donec efficitur, lectus ut aliquam viverra, nisl sem. </p> </div> <div class="col-lg-4 col-sm-12 col-xs-12 slideshow"> <div> <img src="https://placeimg.com/420/320/arch"> </div> <div> <img src="https://placeimg.com/420/320/nature"> </div> <div> <img src="https://placeimg.com/420/320/tech">. </div> </div> </div> </div>

Answer 1

在img标签中使用引导类img-fluid 。

https://getbootstrap.com/docs/4.0/content/images/