I am trying to make a page HTML
, where it simply has to be divided into 2 buttons with an image each inside. What happens is that the images enlarge the buttons to a size that exceeds the screen. What I want is for the buttons to adjust to the size of the screen and not the other way around. Each button has to be next to each other and with an equal width with respect to the other. If possible using bootstrap.
Code so far (with hardcoded size):
<!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>
As it should be, without increasing the size of the page (sorry for the bad design but it is understandable):