Question

我正在尝试将主页分为两半。页面应该看起来像this page - 两个图像应该响应，它们应该覆盖全屏，两侧没有空格，图像应该是可点击的。如果没有JavaScripts可以用HTML和CSS编写，我将不胜感激。

我现在得到的一切是：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="body">
      <div id="production" class="column half">
        <h1>production</h1>
      </div>
      <div id="label" class="column last">
        <h1>label</h1>
      </div>
    </div>
  </body>
</html>

和css

.body { overflow: hidden; margin: 0; width: 100%; height: 100%;}
.column { float: left; }
.half { height: 100%; width: 50%; }
.last { height: 100%; float: none; width: auto; }
#production { background-image:url(bgprod.jpg); }
#label { background-image:url(bglabel.jpg); }

感谢您的帮助。

Answer 1

我快速勾画出你可以使用的东西。这符合您的要求，因为图像与屏幕尺寸成正比。

html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="col-half">
        <img class="responsive-image" src="test.jpg" />
      </div>
      <div class="col-half">
        <img class="responsive-image" src="test.jpg" />
      </div>
    </div>
  </body>
</html>

和css：

html, body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.container { 
    width: 100%;
    height: 100%;
}

.col-half {
    margin: 0;
    padding: 0;
    float: left;
    max-width: 50%;
    height: 100%;
}

.responsive-image {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

HTML页面分为两个hlaves - 两个没有JS的全屏响应链接图像

1 个答案: