twitter-bootstrap Bootstrap 轮播响应式 img
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42849250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel responsive img
提问by Chicky Egg
I want to have the img in the carousel responsive. The height should be 100vh but the width needs to be as wide as it goes, depending on how big the img is. The overflowing part should be hidden. Now, when the screen gets smaller, the img is resized not to scale. Here's some screen shots
我想让轮播中的 img 响应。高度应为 100vh，但宽度需要尽可能宽，具体取决于 img 的大小。溢出的部分应该隐藏起来。现在，当屏幕变小时，img 会调整大小而不是按比例缩放。这是一些屏幕截图
This is fine at full width, desktop version
这在全宽桌面版中很好
This is about the witdh of tablets, but there are white space at the bottom which i dont want.
这是关于平板电脑的，但底部有我不想要的空白。
This is the phone version, resized but not to scale. It should also takes up the whole window, but the overflowing width can be hidden.
这是手机版本，已调整大小但未按比例调整。它也应该占据整个窗口，但可以隐藏溢出的宽度。
This is what I have for css:
这就是我对 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 -->回答by Imran Rafiq Rather
There is a better and a very simple to do this. Keep all your carousel code within the bootstrap column within a row(Grid system) And give some class name like .carousel-columnin my example and then do two things.
有一个更好且非常简单的方法可以做到这一点。将所有轮播代码保存在一行（网格系统）内的引导列中，并在我的示例中给出一些类名，如.carousel-column，然后做两件事。
1.Set some height and width as per your wish in your custom css file. 2.And set img-responsivein your code in the mail HTML Page for carousel items.
1.根据您的意愿在自定义 css 文件中设置一些高度和宽度。2.并在邮件 HTML 页面的代码中为轮播项目设置img-responsive。
It worked for me, hope it will work for all.
它对我有用，希望对所有人有用。
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>
Now do this in CSS file
现在在 CSS 文件中执行此操作
CSS Styling:
.carousel-column{
height:500px;
width:900px;
margin:0 auto;
}
回答by Vaneet Thakur
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100vw;
height: 100vh;
max-width: none;
object-fit:cover;
object-position:center;
}
Please replace you CSS code.
请替换您的 CSS 代码。
回答by neocosmic
it worked like that
它是这样工作的
<div class="carousel-item activo">
<a href="#" style="display: block; width: 100%; height: 100%;">
<img class="img-fluid d-block w-100" src="01.jpg" alt="Alternate Text" />
</a>
</div>
回答by Deepak swain
if you are using img src="...", then use class="img-responsive"and in css width="100%".
如果您正在使用img src="..."，则class="img-responsive"在 css 中使用和width="100%"。
回答by Jyoti Pathania
Try this:
试试这个：
Check Demo here
在这里检查演示
HTML:
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:
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;
}
回答by kashmira gilitwala
Need to change img css that please check
需要更改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 -->