Question

我在html中有div，它应该在其中包含10个相等的div，带有一些图片和文本。我的div高度和宽度是百分比。我必须在这些div中放置一些图像，但问题是我不知道如何计算我需要的图像的高度x宽度。图像应该是宾果球，我制作了尺寸为128x128的球。

这是我的Fiddle，带有白色边框的div应该保存带有div的图像和图像should scale。

带绿色边框的Div应该有10个带蓝色边框的div。每个带蓝色边框的div应该有div白色边框（图像div）和div红色（一些文本应该在图像右边）。

我尝试的所有东西都没有用完。

Answer 1

我把你的形象放在这里：http://tinypic.com/r/103d995/5并做了一个有弹性的例子并保持其比例。

<强> Live demo (click).

示例加价：

  <ul>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
  </ul>

<强> CSS：

ul {
  list-style: none;
  font-weight: bold;
  margin: 0;
  padding: 0;
  width: 15%;
  white-space: nowrap;
}

li {
  float: left;
  clear: both;
  border: 10px solid black;
  margin: 0;
  padding: 0;
  background: lightblue;
  width: 100%;
  min-width: 100px;
}

li img {
  vertical-align: middle;
  height: auto;
  width: 25%;
}

li span {
  width: 75%;
  text-align: center;
  display: inline-block;
}

如果您还希望缩放文本，请查看新的css3 vw单元或旧版浏览器，请使用javascript。您可能会感兴趣的是一个名为 bigText 的脚本。

以HTML格式缩放图像

1 个答案: