我有一组16x9图像设置为百分比宽度(20%),并在混合中添加了一个添加按钮。我需要添加按钮的高度等于图像的高度。我已尝试使用padding-top
设置按钮的“高度”,并将其设置为11.25%,即20%的9/16。
这几乎适用于Chrome,但在示例中,当您调整窗口大小(全屏显示)时,子像素渲染会启动并为按钮渲染高于图像的高度,从而导致换行问题。
是否有更好的方法可以使用flexbox实现这一目标?一个没有亚像素渲染问题的工作?
.imageSection {
box-sizing: border-box;
overflow: hidden;
}
.imageSection > img,
.imageSection > button {
width: 20%;
float: left;
box-sizing: border-box;
}
.imageSection > button {
padding: 0;
border: 0;
margin: 0;
padding-top: 11.25%; /* (20 / 16) * 9 */
position: relative;
background: #bd2a72;
color: #fff;
}
.imageSection > button::after {
content: "+";
position: absolute;
width: 30px;
height: 14px;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -7px;
}
<div class="imageSection">
<button></button>
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
</div>
答案 0 :(得分:1)
这个怎么样?
.imageSection {
box-sizing: border-box;
overflow: hidden;
display: flex;
align-items: stretch;
position: relative;
flex-wrap:wrap;
}
.imageSection > img,
.imageSection > button {
width: 20%;
box-sizing: border-box;
height:100%;
}
.imageSection > button {
padding: 0;
border: 0;
margin: 0;
position: relative;
background: #bd2a72;
color: #fff;
height:inherit;
}
.imageSection > button::after {
content: "+";
position: absolute;
width: 30px;
height: 14px;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -7px;
}
<div class="imageSection">
<button></button>
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
<img src="http://placehold.it/1600x900" />
</div>