Question

我创建了一个基于div的表。我正在尝试拍摄一张图像，将其放在左上方的单元格中并使其响应。我已经做出了响应，但它不在我希望它的表格单元格中。有什么帮助吗？

的jsfiddle：

https://jsfiddle.net/benjones337/3c4fkb78/18/

HTML

    <div class="hmTable">
        <div class="hmTableRow">
            <div class="hmTableCell"><p class="rspimg1"></p></div>
            <div class="hmTableCell"><p class="rspimg2"></p></div>
        </div>
        <div class="hmTableRow">
            <div class="hmTableCell">textholder</div>
            <div class="hmTableCell">textholder</div>
        </div>
</div>

CSS

 .hmTable { 
                margin: 0 auto; /* or margin: 0 auto 0 auto */
                display: table;
                width: 50%;

        }
.hmTableRow {
                display: table-row;
        }

.hmTableCell, .hmTableHead {
                display: table-cell;
                width: 50%;
        height:100%;
                border: 1px solid #999999;
          position:relative;


        }

.hmTableBody {
                display: table-row-group;
        }
.rspimg1{
      background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png");
      background-repeat:no-repeat;
      background-size:100% 100%;
      width:100%;
      height:100%;
      position:absolute;

 }

.rspnimg2{

}

Answer 1

删除position:absolute或将top:0添加到.rspimg1。 Result

Answer 2

使用background-image时，div不随图像一起增长，因此您需要为单元格或图像div指定高度/宽度（顺便说一句，我将您的p更改为div，因为p是用于文字而非图片。

下面的示例我很确定看起来很接近你所追求的，如果没有，请给我发表评论，我会为你解决。

html, body {
  margin: 0;
  height: 100%;
}
.hmTable {	
  margin: 0 auto;
  display: table;
  width: 50%;
  height: 30%;
}
.hmTableRow {
  display: table-row;
  height: 10%;
}
.hmTableCell, .hmTableHead {
  display: table-cell;
  width: 50%;
  height:100%;
  border: 1px solid #999999;         				
}
.rspimg1{
  background: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png") center no-repeat;
  background-size: contain;
  width:100%;
  height:100%;
}

.rspnimg2{
}

<div class="hmTable">
  <div class="hmTableRow">
    <div class="hmTableCell">
      <div class="rspimg1">triangle</div>
    </div>
    <div class="hmTableCell">
      <div class="rspimg2">square</div>
    </div>
  </div>
  <div class="hmTableRow">
    <div class="hmTableCell">textholder</div>
    <div class="hmTableCell">textholder</div>
  </div>
</div>

div表响应图像

2 个答案: