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):
Well with
bootstrap4
is not necessarywidth
andheight
since it already has some classes implemented for thish-100
, for it tow-100
work you have to usesetear
simple .height
100%
CSS
The container class should be
.container-fluid
so that it occupies the full width of the window, and the most important thing is that the children have the classcol-md-6 m-0 p-0
so that it occupies half the container withmargin
y setpadding
to 0Maybe this snippet can help you, if that's what you need
You could also do it with styles.