Как сделать две гиперссылки кнопки изображения бок о бок в полноэкранном режиме?

Question

Я хочу иметь два изображения, левую и правую половинки страницы, которые при нажатии на них перенаправляются на определенную ссылку.

Когда пользователь входит на веб-страницу, я хочу, чтобы они не видели ничего, кроме этих двух изображений (которые можно щелкнуть), и я не хочу, чтобы он был прокручиваемым, т. Е. Я просто хочу, чтобы он помещался на одну страницу ,

Не очень опытен с 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> 

Answer 1

Глядя что-то вроде этого

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>

Answer 2

Лучший метод, который я думаю, что было бы использовать flexbox с viewport units (vh и vw) и использовать backround-image с background-size: cover - см demo ниже:

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>

Answer 3

Существует много ответов на это так просто выбрать то, что вам нравится. Вот как работать с ним вообще, независимо от того, что происходит в 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>