代码之家 › 专栏 › 技术社区 › JDS

如何使两个图像按钮超链接并排占据全屏?

css-position css-float image css html

2

JDS · 技术社区 · 8 年前

我想有两个图像,页面的左半部分和右半部分,当点击时,重新指向特定的链接。

当用户进入网页时,我希望他们只看到这两个图像(可点击),我也不希望它是可滚动的,也就是说,我只希望它适合单个页面。

不太熟悉HTML-如何修改/重写下面的代码?

<a href="http://www.google.com">
<img src="left_image.png" alt="Go to Google!" >
</a>

<a href="http://www.facebook.com">
<img src="right_image.png" alt="Go to Facebook!" >
</a>

3 回复 | 直到 7 年前

1

4

Santhosh Kumar 8 年前

看起来像这样

html,body{
  width:100%;
  height:100%;
  margin:0
}
div.container{
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
  
}
.left, .right{
    width:50%;
    height:inherit;
    float:left
}
a{
  display:block;
  width:100%;
  height:inherit
}
.left{
  background:url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
  background-size:cover;
}
.right{
  background:url(https://pixabay.com/static/uploads/photo/2016/03/28/12/35/cat-1285634_960_720.png);
  background-size:cover;
}

<div class="container">
  <div class="left">
    <a href="www.google.com" ></a>
  </div>
  <div class="right">
      <a href="www.facebook.com"></a>
  </div>
</div>

2

kukkuz 8 年前

我认为最好的方法是使用 flexbox 具有 viewport units ( vh 和 vw )并使用 backround-image 具有 background-size: cover -请参阅下面的演示:

body{
  margin:0;
  display:flex;
}
*{
  box-sizing:border-box;
}
a {
  width:50vw;
  height: 100vh;
  border:1px solid red;
  display:flex;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
a.left{
  background-image: url('http://placehold.it/500x500');
}
a.right{
  background-image: url('http://placehold.it/600x600');
}

<a class="left" href="http://www.google.com"></a>
<a class="right" href="http://www.facebook.com"></a>

3

2

norcal johnny 8 年前

有很多答案,所以选择你喜欢的。一般来说,无论div中发生了什么,这就是如何使用它。

.holder {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow:hidden;
}
.one, .two {
    width: 50%;
}
.one {
    background: red;
}
.two {
    background: green;
}

    <div class="holder">
    <div class="one"><a href="http://www.google.com">
    <img src="left_image.png" alt="Go to Google!" >
    </a>
    </div>
    <div class="two"><a href="http://www.facebook.com">
    <img src="right_image.png" alt="Go to Facebook!" >
    </a></div>
    </div>