如何在该空白区域的第一行再放一张图像？

Question

我想在那个空白区的第一行再放一张图像。左侧按钮（现在出）可能会或可能不会覆盖图像 我正在使用bootstrap网格布局。 col-sm-2有6个相等的列，但我也需要放一个按钮。为此，我使用了自举按钮并减小了它的宽度，这样我就可以为第六张图像清空一些空间。

＆＃13;

＆＃13;

.list-group {
    width: 100%;
}
.list-group-item-action {
    color: black;
    background: white;
}
.list-group-item-action:hover {
    background: #3d6277;
    color: white;
}
.container-fluid {
    width: 100%;
}
.search {
    width: 300px;
}
.img-fluid {
    margin: 0 auto;
}
h2 span {

	color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 

}
h2{
   color: white;
   position: absolute; 
   top: 0px; 
   left: 50px; 
   width: 100%; 	
}
.btn {
  width:0px;
  padding:10px;
}

h6{
  font-size:22px;
  text-align: center;

}

.btn btn-primary btn-sm{
  background-color: #8064A2 !important;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
/*
h2 span.spacer {
   padding:0 5px;
}*/


.font-size{
	font-size:10px;
  font-weight:20px;
}
.vertical{
  text-align: horizontal;
  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-90deg);  /* IE 9 */
       -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
          transform: rotate(-90deg);
}

＆＃13;

<div class="container-fluid">
 <div class="search">
<input type="text" class="form-control" name="search box" placeholder= "search..." [(ngModel)]="movieName">	
</div>
<br>
<div class="row">
<button type="button" class="btn btn-info btn-sm"><h6 class="vertical">Out Now</h6></button>
 <div class="list-group col-sm-2" *ngFor="let movie of movies|search:movieName;">
    <button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
    <div class="image">
<img src={{movie.img}} class="img-fluid" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>

</div>
</button>
 </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该减小图像的宽度并使它们相等。

由于每行有6张图像，因此可以将其宽度设置为：

img { /* set them a class or be more specific */
  width: calc(100% / 6);
}

编辑：正如评论中所讨论的那样，OP存在问题，因为在同一行上放置了一个按钮，将图像推到下一行。

解决方案：定位button absolute并添加z-index属性，以使其可见。

Answer 2

您可以将margin-right: 0;应用于:nth-child(6)电影项目。

Answer 3

This链接可能会对您有所帮助。 还有另一种方法可以做到这一点

<img style='height: 100%; width: 100%; object-fit: contain'/>