Bootstrap 3图像未显示在表格中

Question

我正在尝试制作一张自适应的图像表格，但如果没有给出固定的宽度/高度，图像就不会显示在表格中，因为它可能没有被重新显示尺度的。

＆＃13;

＆＃13;

.flip {
  position: relative;
  width: 13em;
  /* Set default width of flip */
  height: 13em;
  /* Set default height */
  -webkit-perspective: 14em;
  /* larger the value, the less pronounced the 3D effect */
  -moz-perspective: 14em;
  -o-perspective: 14em;
  perspective: 14em;
  box-shadow: 0 .125em .5em;
  -webkit-box-shadow: 0 .125em .5em;
  -o-box-shadow: 0 .125em .5em;
  -moz-box-shadow: 0 .125em .5em;
}
.flip .rotate {
  width: 100%;
  height: 100%;
  -moz-transform-style: preserve-3d;
  /* Specify all child elements inside this DIV maintain the same perspective */
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: all 0.6s ease-in-out 0.3s;
  /* final 0.3s specifies delay before effect kicks in */
  -webkit-transition: all 0.6s ease-in-out 0.3s;
  -o-transition: all 0.6s ease-in-out 0.3s;
  transition: all 1.9s ease-in-out 0.3s;
}
.flip .rotate > * {
  /* Target all children elements */
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip .rotate > div {
  /* Target all child DIVs */
  -webkit-box-sizing: border-box;
  /* Specify that any border/ paddings do not add to the DIV's total width */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px;
  background: #eee;
}
.flip:hover > .rotate.x {
  /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

＆＃13;

<div class="col-md-6 ">
  <table class="box table">
    <tr>
      <td>
        <div class="u-left-box">
          <div class="flip">
            <div class="rotate x">
              <img data-src="http://placehold.it/192x192" class="img-responsive" />
              <div class="rotated-image">
                <a href="javascript:">
                  <img src="http://placehold.it/192x192" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

u-left-box类仅用于表格中每个框的填充。