如何将图像放在没有空间的盒子中 [英] How to put images in a box without space
本文介绍了如何将图像放在没有空间的盒子中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用引导程序学习HTML和CSS。
I am learning HTML and CSS using bootstrap.
我正在研究轮播示例代码。但是像图片一样,盒子中还有一个空格。
I am studying carousel example code. But like the image, there's a space left in the box.
我如何在全屏的情况下将盒子装满?
How can I fill the box with full screen without space?
这是轮播标记:
<div class="col-lg-6 col-sm-6 portfolio-item">
<div class="card h-100">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<img src="image/image-1.jpg" style="width: 100%; height: 100%;">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item">
<div class="carousel-caption d-none d-md-block">
<img src="image/image-2.jpg" style="width: 100%">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item">
<div class="carousel-caption d-none d-md-block">
<img src="image/image-3.jpg" style="width: 100%; height: 100%;">
</div>
</div>
</div>
</div>
</div>
</div>
我上传CSS代码
1。 css
`body {
background-image: url("../image/bgimage.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.carousel-item {
height: 44vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
++ other.css同一项目
++other.css same project
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner::after {
display: block;
clear: both;
content: "";
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
推荐答案
您可以为所有CSS添加滑块图像
You can add CSS for all slider images
#carouselExampleIndicators .carousel-inner .carousel-item img{
height: auto;
max-width: 100%;
display:block;
width: 100%;
}
这篇关于如何将图像放在没有空间的盒子中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文