我正在尝试制作一个页面HTML
,只需将其分为 2 个按钮,每个按钮内部都有一个图像。发生的情况是图像将按钮放大到超出屏幕的大小。我想要的是让按钮适应屏幕的大小,而不是相反。每个按钮必须彼此相邻,并且彼此之间的宽度相等。如果可能的话,使用引导程序。
到目前为止的代码(硬编码大小):
<!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>
应该是这样,不增加页面大小(对于糟糕的设计感到抱歉,但这是可以理解的):
好吧 with
bootstrap4
不是必需的width
,height
因为它已经为此实现了一些类h-100
,要让它w-100
工作,你必须使用setear
simple 。height
100%
CSS
容器类应该是
.container-fluid
占据整个窗口的宽度,最重要的是孩子有这个类col-md-6 m-0 p-0
,这样它就占据了容器的一半,margin
y设置padding
为0如果这是您需要的,也许这个片段可以帮助您
你也可以用样式来做。