Html 在 Bootstrap 轮播中拉伸和填充图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33685259/
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
Stretch and fill image in Bootstrap carousel
提问by Mike Ross
Hi guys i am using bootstrapcarousal and having some problem with image height and width. Even though i define it in the imgattribute it still displays as original resolution,following is the code i am using
大家好，我正在使用bootstrapcarousal 并且在图像高度和宽度方面存在一些问题。即使我在img属性中定义它它仍然显示为原始分辨率，以下是我使用的代码
<div class="col-md-6 col-sm-6">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
</div>
<div class="item">
<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
</div>
<div class="item">
<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Here is demoof that.
这是演示。
What should i do to fill the image in a certain height and width regardless of its original resolution.
无论原始分辨率如何，我应该怎么做才能以一定的高度和宽度填充图像。
回答by Matija Mrkaic
You can use background-size: cover, while still having hidden <img>element for SEO and semantic purposes. Single img url is used both times, so there's no additional loading, and background-size is well supported(unlike object-fitwhich lacks supportin IE, Edge and Android < 4.4.4).
您可以使用background-size: cover, 同时仍然具有<img>用于 SEO 和语义目的的隐藏元素。单IMG网址使用两次，所以没有额外的负载，以及背景尺寸很好的支持（不像object-fit它缺乏支持在IE中，边缘和Android <4.4.4）。
HTML change:
HTML 更改：
<div class="item" style="background-image: url(http://placehold.it/400x400);">
<img src="http://placehold.it/400x400"/>
</div>
CSS change:
CSS变化：
.carousel {
/* any dimensions are fine, it can be responsive with max-width */
width: 300px;
height: 350px;
}
.carousel-inner {
/* make sure your .items will get correct height */
height: 100%;
}
.item {
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 100%;
}
.item img {
visibility: hidden;
}
回答by Aref Ben Lazrek
You can place height in css and add !important because bootstrap is overriding your height with auto , and object-fit:cover; will work like background size cover a fiddle
您可以在 css 中放置高度并添加 !important，因为引导程序使用 auto 和 object-fit:cover 覆盖您的高度；将像背景大小覆盖小提琴一样工作
.carousel{
width:300px;
}
.item img{
object-fit:cover;
height:300px !important;
width:350px;
}
回答by Mathias Asberg
That you have width in placeholder should not matter, put this in your css and it should work, If it works you can try remove !important.
你在占位符中有宽度应该无关紧要，把它放在你的 css 中，它应该可以工作，如果它有效，你可以尝试删除 !important。
.carousel img {
width:100% !important;
min-width:100 !important;
height: auto;
}
.img-responsive in bootstrap will just set the width to 100%, So in the case that the image original proportions are less than carousel width it will not fill it out.
bootstrap 中的 .img-responsive 只会将宽度设置为 100%，因此在图像原始比例小于轮播宽度的情况下，它不会填充它。
回答by Michael Coker
The carousel will grow to fit whatever the parent is by default, which in your case is .col-md-6and .col-sm-6. If you want the carousel to be 300x300, style the carousel class/id or whatever to be the dimensions you want.
轮播将增长以适应默认情况下父级的任何内容，在您的情况下是.col-md-6和.col-sm-6。如果您希望轮播为 300x300，请将轮播类/id 或任何您想要的尺寸设置为样式。
Then after that, bootstrap applies height: auto;to images in the carousel, which will override the heightattribute you've specified in the HTML. 2 ways you can address that - either make the height(and for consistency sake, width, too) an inline styleon the imgtag if you want to keep it in the HTML, or apply the height to carousel images in your CSS file.
然后，引导程序应用于height: auto;轮播中的图像，这将覆盖height您在 HTML 中指定的属性。有 2 种方法可以解决这个问题 -如果您想将其保留在 HTML 中，或者将高度height（为了一致性起见，width也是）内联style在img标签上，或者将高度应用于 CSS 文件中的轮播图像。
body {
margin: 10px;
}
.carousel, .carousel img {
width: 300px;
}
.carousel img {
height: 300px!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/400x400">
</div>
<div class="item">
<img src="http://placehold.it/350x450">
</div>
<div class="item">
<img src="http://placehold.it/350x350">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>回答by jmag
Make your image take up 100% of the container size. using height:100% and width:100%.
使您的图像占据容器大小的 100%。使用高度：100% 和宽度：100%。
Then restrict the size by setting values of the container to desired size.
然后通过将容器的值设置为所需大小来限制大小。
.item{
height:300px;
width:350px;
}
.item img{
width:100%;
height:100%;
}
I hope this helps.
我希望这有帮助。
回答by plushyObject
You're defining the size of your placeholders in the URL, not in the HTML attributes for the elements.
您在 URL 中定义占位符的大小，而不是在元素的 HTML 属性中。
Also check out Bootstrap's .img-responsive class here.
还可以在此处查看 Bootstrap 的 .img-responsive 类。
Update
更新
This has changed to .img-fluidin Bootstrap 4 Alpha and Beta
这.img-fluid在 Bootstrap 4 Alpha 和 Beta 中已更改为
回答by antelove
img tag using "object-fit: cover" property
使用“object-fit：cover”属性的img标签
.carousel {
height: 300px;
}
.carousel-inner {
height: 100%;
}
.item {
width: 100%;
height: 100%;
}
.item img {
object-fit: cover;
/*
object-fit: fill;
object-fit: none;
object-fit: contain;
object-fit: scale-down;
*/
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" >
<img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" />
</div>
<div class="item" >
<img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" />
</div>
<div class="item" >
<img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Codepen
代码笔
回答by Shalinee SIngh
Add this to the css of the file. This would restrict the height and width of the image and hence align it.
将此添加到文件的 css 中。这将限制图像的高度和宽度，从而对齐它。
.item img {
max-height: 300px;
max-width: 350px;
}
.item img {
max-height: 300px;
max-width: 350px;
}
回答by Lucian
if it's okay for you to use simple javaScript, here is the updated fiddle https://jsfiddle.net/a1x1dnaa/2/
如果您可以使用简单的 javaScript，这里是更新的小提琴 https://jsfiddle.net/a1x1dnaa/2/
what i have done is, used the image as background and removed the <img>tag.
我所做的是，使用图像作为背景并删除了<img>标签。
jQuery(function(){
var items = $('.item');
items.each(function() {
var item = $(this);
img = item.find("img");
img.each(function() {
var thisImg = $(this);
url = thisImg.attr('src');
thisImg.parent().attr('style', 'background-image:url('+url+')');
thisImg.remove();
});
});
});
then you can use some styles to make the image fill the div
然后你可以使用一些样式让图像填充div
.item {
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
height: 200px; //you can use the height as you need
}
this should work for you.
这应该适合你。
if you don't want to use javaScript, you can simply use the image as inline-style
如果您不想使用 javaScript，您可以简单地将图像用作内联样式
<div class="item" style="background-image: url(http://placehold.it/400x400)"></div>
and use the same CSS as above.
并使用与上面相同的 CSS。
回答by Gnanasekar S
- Add this class in every image attribute
- 在每个图像属性中添加此类
class="img-responsive center-block"
class="img-responsive center-block"
For example:
例如：
<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />
Add this style
.active img{ width: 100%; }
添加此样式
.active img{ width: 100%; }
