根据图像宽高比匹配按钮高度

时间:2016-05-03 13:28:05

标签: html css css3 flexbox

我有一组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>

1 个答案:

答案 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>