Question

我正在使用bootstrap来构建一个包含180 * 180 div的响应式菜单栏，其中包含一个100 * 100 img，我已将其调整为53 * 53。就引导而言，我是一个菜鸟，而且我也没有使用CSS。我想要的是div在大屏幕上以180 * 180开始，并调整大小保持它的方形，并且仍然保持居中的img（我估计它可以保持在53 * 53 - 但是如果我能让它也调整大小我会非常高兴，因为我们可能会在未来将图像更改为更大。）

Here is a fiddle of the work so far

有人可以帮忙吗？我花了几个小时玩引导程序，并查看其他示例，我的老板开始认为我是一个白痴，我很可能，但我真的想让它工作...... 这是我的代码：

＆＃13;

.new-menu-item {
  text-align: center;
}
p {
  color: #fff;
}
img {
  width: 53px;
  height: 53px;
  margin-top: 40px;
  margin-bottom: 20px;
}
a {
  padding: 7px;
  background-color: #990000;
  display: block;
}
a:hover {
  background-color: #000;
}
a.active {
  background-color: #000;
}

＆＃13;

<div class="row" id="new-menu">

  <div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item">
    <a href="" class="new-menu-link">
      <p>
        <img src="http://www.placehold.it/100x100" />
        <br />Menu Item 1
      </p>
    </a>
  </div>

  <div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item">
    <a href="" class="new-menu-link">
      <p>
        <img src="http://www.placehold.it/100x100" />
        <br />Menu Item 2
      </p>
    </a>
  </div>
  <div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item">
    <a href="" class="new-menu-link">
      <p>
        <img src="http://www.placehold.it/100x100" />
        <br />Menu Item 3
      </p>
    </a>
  </div>
  <div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item">
    <a href="" class="new-menu-link active">
      <p>
        <img src="http://www.placehold.it/100x100" />
        <br />Menu Item 4
      </p>
    </a>
  </div>
  <div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item">
    <a href="" class="new-menu-link">
      <p>
        <img src="http://www.placehold.it/100x100" />
        <br />Menu Item 5
      </p>
    </a>
  </div>
  <div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item">
    <a href="" class="new-menu-link">
      <p>
        <img src="http://www.placehold.it/100x100" />
        <br />Menu Item 6
      </p>
    </a>
  </div>
</div>

＆＃13;

响应div包含调整大小的图像以保持宽高比

0 个答案: