如何使两个图像按钮超链接并排占用全屏？
问题描述：
我想有两个图像，左侧和右侧的一半，点击时，重新指向特定的链接。如何使两个图像按钮超链接并排占用全屏？
当用户进入网页时，我希望他们只看到这两个图片（可点击），我也不希望它可以滚动，也就是说我只想让它适合单页。
不是很有经验的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>
答
看起来像这样
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>
答
我认为最好的方法是使用一个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>
答
有很多的答案，这样的所以只选择你喜欢什么。一般情况下，无论什么东西都可以使用这个方法。
.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>
愚蠢的问题，但所有这些代码走在主HTML文件？ – JDS
是的，你可以。但要确保容器div是作为一个直接的孩子附加到身体标签 –
Gotcha谢谢！ – JDS