Estoy tratando de hacer una página HTML
, donde simplemente tiene que estar dividida en 2 botones con una imagen cada uno dentro. Lo que sucede es que las imágenes agrandan los botones a un tamaño que excede la pantalla. Lo que quiero es que los botones se acomoden al tamaño de la pantalla y no al revés. Cada botón tiene que estar uno al lado del otro y con un ancho igual respecto al otro.
Si es posible usando bootstrap.
Código hasta ahora(con tamaño hardcodeado):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'accounts/style.css' %}">
</head>
<body>
<h1>Vota!</h1>
<div id="main" class="container">
<button type="button" name="yes">
<img width="100px" height="100%" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Facebook_like_thumb.png">
</button>
<button type="button" name="no">
<img width="100px" height="100%" src="https://upload.wikimedia.org/wikipedia/commons/2/21/Not_facebook_dislike_thumbs_down.png">
</button>
</div>
</body>
</html>
Como debería ser, sin agrandar el tamaño de la página(perdón por el mal diseño pero se logra entender):
Bootstrap 3
oBootstrap 4
?