Bootstrap旋转木马响应img

我想在旋转木马响应img。高度应该是100vh，但宽度需要尽可能宽，取决于img的大小。溢出部分应该隐藏起来。现在，当屏幕变小时，img的大小不会缩放。下面是一些屏幕截图Bootstrap旋转木马响应img

这是在全宽，桌面版本

这是关于平板电脑的witdh精细，但也有在此我不想底部的空白。

这是手机版本，调整大小，但不是按比例调整。它也应占用整个窗口，但可以隐藏溢出的宽度。

这是我对CSS：

.carousel, 
 
.carousel-inner { 
 
    height: 100vh; 
 
} 
 

 
.carousel img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 100vw; 
 
    height: 100vh; 
 
    max-width: none; 
 
}

<div class="carousel-inner" role="listbox"> 
 
         <div class="item active"> 
 
          <img class="img-responsive" src="photos/JO2_2978.JPG" alt="xmas_orchestra"> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2875.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_1824.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2955.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_3913.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2957.JPG" alt="..."> 
 
         </div> 
 

 
        </div> <!-- CAROUSEL-INNER -->

来源

2017-03-17 Chicky Egg

对于你应该使用图像作为'背景image'不是IMG SRC。 – vivekkupadhyay

看看这个方法https://jsfiddle.net/wamosjk/6s5u8de1/ –

如果您使用img src="..."，然后用class="img-responsive"和CSS width="100%"。

来源

2017-03-17 05:01:51

试试这个：

检查演示here

HTML：

<div class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active" style="background-image:url(http://dentistry.utah.edu/images/slider-banner/roy-hume.jpg); "> 
    </div> 
    <div class="item" style="background-image: url(http://dentistry.utah.edu/images/slider-banner/school-dentistry-students.jpg);"> 
    </div> 
    </div> 
    <!-- CAROUSEL-INNER --> 
</div>

CSS：

.carousel, 
.carousel-inner { 
    height: 100vh; 
} 

.item { 
    border: 1px solid grey; 
    max-height: 100vh; 
    min-height: 100vh; 
    max-width: 100vw; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
}

来源

2017-03-17 07:55:24

需要改变的img的CSS请

.carousel, 
 
.carousel-inner { 
 
    height: 100vh; 
 
} 
 

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

<div class="carousel-inner" role="listbox"> 
 
         <div class="item active"> 
 
          <img class="img-responsive" src="photos/JO2_2978.JPG" alt="xmas_orchestra"> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2875.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_1824.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2955.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_3913.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2957.JPG" alt="..."> 
 
         </div> 
 

 
        </div> <!-- CAROUSEL-INNER -->

来源

2017-03-17 09:30:28

有一个更好的和非常简单的做到这一点。保留所有您的轮播代码在一行内的引导列内（网格系统）并在我的示例中给出一些类名称，如.carousel-column，然后执行两项操作。

1.在您的自定义css文件中根据您的愿望设置一些高度和宽度。 2.在您的代码中设置img-responsive用于轮播物品的邮件HTML页面。

它为我工作，希望它能为所有人工作。

HTML CODE: 
<!-- Carousel to highlight main services--> 
    <div class="row"> 
     <div class="col-md-9 carousel-column"> 
    <div id="myCarousel" class="carousel slide"> 
     <!-- 1.Carousel Indicators--> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" class="active" data- 
slideto="0</li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- 2.carousel Items (Picture plus data)--> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="images/book2.jpg" class="img-responsive img-cus" > 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Web Development</h1> 
         <h3>Let's begin development.It really is about who you are and what you can do</h3> 
         <p><a class="btn btn-primary btn-large" href="signup.html">Sign Up</a></p> 
        </div> 
       </div> 
      </div> 

      <div class="item"> 
       <img src="images/book.jpg" class="img-responsive img-cus"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Twitter Bootstrap</h1> 
         <h3>A HTML,CSS,Javascript library for responsive 
mobile first web development</h3> 
         <p><a class="btn btn-primary btn-large" 
href="signup.html">Sign Up</a></p> 
        </div> 
       </div> 
      </div> 

      <div class="item"> 
       <img src="images/coffee.jpg" class="img-responsive img-cus" 
> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Java Tutorials</h1> 
         <h3>A powerful secure server side object oriented 
programming language</h3> 
         <p><a class="btn btn-primary btn-large" 
href="signup.html">Sign Up</a></p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- Now We will create the carousel controls--> 
     <a href="#myCarousel" class="left carousel-control" data- 
slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 

     <a href="#myCarousel" class="right carousel-control" data- 
slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 
     </div> 
    </div>

现在做这在CSS文件

CSS Styling: 
     .carousel-column{ 
     height:500px; 
     width:900px; 
     margin:0 auto; 
     }

来源

2017-11-25 08:55:23 emmei

Bootstrap旋转木马响应img

回答

相关问题