Question

我希望保持相同的图像比例。问题是当浏览器很宽时它会拉伸。当它减少时会发出吱吱声。

我已经在这里检查了所有问题，但大多数都没有帮助我。

以下是标记：

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/female/IMG_5053-2.jpg" 
           data-src="images/female/IMG_5053-2.jpg" alt="First slide">

这是 CSS

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

我试图制作一个jsfiddle，但我不能在这里找到页面的链接http://maanastore.com/home.php

Answer 1

从相应的文件中删除以下CSS规则：

在home.php文件中

.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

in carousel.css

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

另外，在carousel.css文件中将margin-top: 51px;添加到.carousel类并从同一个类中删除height:500px，因为您已修复了导航栏。

Answer 2

我发现最好删除以下内容。

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

并在.carousel中删除：

height: 500px;

并且在 .carousel .item删除

 height: 500px;

对我而言，这使得图像按照我想要的方式工作，但一定要先在你的html中插入一个图像，否则我认为如果你在本地工作就会陷入虚无。

编辑：另一位用户建议我添加此 请注意，如果图像在任一侧或甚至在一侧显示灰色条，我建议保留

.carousel-inner > .item > img {
    min-width: 100%;
}

Answer 3

我最终做的是在内部添加一个div，然后将div的图像背景作为响应

override func viewDidAppear(_ animated: Bool) {
    // clockwise
    myView.rotateWithAnimation(angle: 90°)

    // counter-clockwise
    myView.rotateWithAnimation(angle: -270°) 

}

Answer 4

您可以典型地使用 margin ，以改善以图像为中心的结果。

.carousel-inner > .carousel-item > img {
margin: 0; //If you have images of very different sizes.    
max-width: 100%; }

Answer 5

我在第5835 - 5847行对bootstrap.css进行了这些调整：

.carousel-inner {
  position: relative;
  /* Removed height here */
  overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100vh;
  height: 100vh;
  display: none;
  width: 100%;
}

像冠军一样工作！

Answer 6

我一直在从事这样的项目这可能会帮助需要使用浏览器做出响应的滑块的人。

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Open+Sans:400,400i,700");
body {
  font-family: "Open Sans", sans-serif;
  color:black;
}

slider{
  display: block;
  width: 100%;
  height: 80%;
  overflow: hidden;
  position: absolute;
}
 
 slider > *{
  position: absolute;
  display: block;
  width:100%;
  height: 100%;
  animation: slide 8s infinite;
 }

 slide:nth-child(1){
  left:0%;
  animation-delay: -10s;
  background-image: url(../images/slider7.jpeg);
  background-size: cover;
  background-position: center;
 }

 slide:nth-child(2){
  animation-delay: -12s;
  background-image: url(../images/slider2.jpeg);
  background-size: cover;
  background-position: center;
 }


 slide:nth-child(3){
  animation-delay: -14s;
  background-image: url(../images/slider6.jpeg);
  background-size: cover;
  background-position: center;
 }
  slide:nth-child(4){
  animation-delay: -16s;
  background-image: url(../images/slider0.jpeg);
  background-size: cover;
  background-position: center;
 }


slide p{
  font-family: Comfortaa;
  font-size: 70px;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin:10%;
  color:#fff;
}
slide h1{
  font-family: Comfortaa;
  font-size: 60px;
  text-align: center;
  display: inline-block;
  color:#fff;
  margin-top: 20%;
  margin-left: 10%;
}
@keyframes slide {
  0% {left:100%; width:100%;}
  5% {left:0%;}
  25% {left:0%;}
  30% {left: -100%; width: 100%;}
  30.0001%{left: -100%; width:0%;}
  100%{left: 100%; width: 0%}

}

<section class="container">
		<slider>
			<slide></slide>
		    <slide><h1>Slide Text one</h1></slide>
		    <slide><h1>Slide Text Two</h1></slide>
		     <slide><h1>Slide Text Three</h1></slide>
		</slider> 
 </section>

此链接还可以为您提供更多见解Making Images Responsive

如何使bootstrap轮播图像响应？

6 个答案: