使用CSS和HTML最大化网页上的图像

我一直在尝试创建一个（非常难看）页面，根据屏幕宽度调整图像大小。目标是最大化图像，使其大小相等。

到目前为止，我已经为两个"单元格"做到了这一点，但由于某些原因，其他图像不会调整大小。我只能使用HTML（5）和CSS。你能给我指正确的方向吗？

更新：应请求添加jsfiddle：http://jsfiddle.net/mNSLw/

<html>
<head>
<style type="text/css">
body
{
  background-color:#0D8A02;
  text-align:center;
  color: #FFFB00;
}
table
{
  text-align:center;
  border: 2px solid #FFFFFF
}
div.img
{
  margin: 0px;
  border: 1px solid #FFFB00;
  height: auto;
  width: auto;
  text-align: center;
}   
div.img img
{
  display: inline;
  width: 90%;
  height: auto;
  margin: 3px;
  border: 7px solid #FFFB00;
}
div.img a:hover img 
{
  border: 7px solid #FB00FF;
}
div.desc
{
  text-align: center;
  font-weight: normal;
  margin: 5px;
}
.tablex
{
  display:table;
  border-left:5px solid #93FFA4;
  border-right:5px solid #93FFA4;
  text-align:center;
}
.tableheadx
{
  border-top:10px solid #93FFA4;
  border-bottom:10px solid #93FFA4;
  text-align:center;
}
.tablerowx
{
  display:table-row;
  border:3px solid #ff0000;
  text-align:center;
}
.tablecellx
{
  display:table-cell;
  text-align:center;
}
</style>
</head>
<body>
  <div class="tablex">
    <div class="tablerowx">
      <div class="tableheadx">Informatie over Bassano del Grappa</div>
    </div>
    <div class="tablerowx">
      <div class="tablerowx"> 
        <div class="tablecellx">
          <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
            <div class="desc">Ad feugait nostrud lobortis in illum in duis ea nonummy in minim iusto in dignissim. Aliquam feugiat facilisis suscipit ex velit laoreet molestie ut feugait. Lobortis molestie, exerci blandit quis, luptatum tincidunt vero eros luptatum dolore tation erat euismod, ad. Iriure illum dolore qui, velit ullamcorper augue dolore, vel iusto duis lorem nisl enim dolore et eros nulla aliquip. Praesent vel praesent ex feugiat     dolor nostrud eu amet delenit et erat qui iusto, commodo consequat, consequat feugiat. </div>
          </div>
        </div>
        <div style="display:table-cell">
          <div class="tablecellx">
            <div class="img">
              <a target="_blank" href="http://www.w3schools.com/css/klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
              <div class="desc">Add a description of the image here</div>
            </div>
          </div>
          <div class="tablecellx">
            <div class="img">
              <a target="_blank" href="http://www.w3schools.com/css/klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
              <div class="desc">Add a description of the image here</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tablerowx"> 
        <div class="tablecellx">
          <div class="img">
            <a target="_blank" href="http://www.w3schools.com/css/klematis3_big.htm"><img src="http://www.w3schools.com/css/klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
            <div class="desc">Add a description of the image here</div>
          </div>
        </div>
        <div class="tablecellx">
          <table>
            <tr>
             <th>Dag</th>
             <th>Vertrektijden</th>
            </tr>
            <tr>
              <td>Maandag</td>
              <td>
                <table>
                  <tr>
                    <td>07.30</td>
                    <td>08.30</td>
                    <td>09.30</td>
                    <td>13.00</td>
                    <td>14.00</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

我创建了一个JSfiddle，使您的HTML工作：http://jsfiddle.net/s97bC/

我使用Grids960生成了一个三列流体布局，并且只使用了相关的部分，这样您就可以看到它是如何完成的。http://grids.heroku.com/fluid_grid.css?column_amount=3

您应该从代码中删除"display:table-anther"部分，还可以删除任何不必要的div。

CSS3可以根据屏幕大小调整背景图像的大小。这对你有好处吗？

background: url(‘mtn.jpg’) no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%;/* Safari 3.0 */
-khtml-background-size: 100% 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */

源

永远不要以像素为单位定义图像的宽度使用百分比100%将在所有平台上工作

相关内容

最新更新

热门标签：