当前位置： 文江博客话题详情

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

发布于 2025-01-05 23:15:59 字数 4532 浏览 2 评论 0原文

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

到目前为止，我已经成功地对两个“单元格”执行此操作，但由于某种原因，其他图像不会调整大小。我只能使用 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>
原文

I've been trying to create a (very ugly) page that resizes images depending on the width of the screen. The goal is to maximize the images so that they are all equal in size.

So far I've managed to do this for two "cells", but for some reason the other images won't resize. All I'm allowed to use is HTML(5) and CSS. Can you point me in the right direction please?

Update: On request added 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

ペ泪落弦音 2025-01-12 23:15:59

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

我生成了三个- 使用 Grids960 进行列流体布局，并且仅使用相关部分，以便您了解它是如何完成的。
http://grids.heroku.com/fluid_grid.css?column_amount=3

您应该从代码中删除“display:table-whatever”部分，并且还可以删除任何不必要的 div。

I created a JSfiddle, making your HTML work: http://jsfiddle.net/s97bC/

I generated a three-column fluid layout with Grids960, and used only the relevant parts so that you see, how it's done.
http://grids.heroku.com/fluid_grid.css?column_amount=3

You shall remove the "display:table-whatever" parts from your code, and you might remove any unnecessary divs as well.

回复 原文
一江春梦 2025-01-12 23:15:59

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) */

来源

CSS3 can resize background images to the size of the screen. Is this any good to you?

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) */

source

回复 原文
一束光，穿透我孤独的魂 2025-01-12 23:15:59

切勿定义图像的宽度（以像素为单位）使用百分比 100% 将适用于所有平台

Never define width of an image in pixels use percentage 100% will work on all platforms

回复 原文
~没有更多了~

关于作者

柳絮泡泡

暂无简介

文章
评论
654 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文