3

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):

Página bien hecha

6
  • 2
    Muéstrenos que avance tiene hasta el momento lo cuál está causando problemas. Además Bootstrap 3 o Bootstrap 4?
    – Dev. Joel
    el 9 mar. 2018 a las 20:42
  • 1
    @Mati, ya tenés algo de experiencia en el sitio como para saber agregar un ejemplo mínimo verificable
    – Mariano
    el 9 mar. 2018 a las 20:43
  • Es un html básico. Ya borre lo que hice(pego lo que tengo ahora, pero está hardcodeado el tamaño), había intentado con tablas pero no funcionó. Bootstrap 4
    – MatiEzelQ
    el 9 mar. 2018 a las 20:44
  • Agregé un ejemplo, lo mejor que pude. Y el código actual.
    – MatiEzelQ
    el 9 mar. 2018 a las 20:51
  • ¿Y en el archivo style.css ? tiene algunas reglas ?
    – Dev. Joel
    el 9 mar. 2018 a las 20:55

3 respuestas 3

3

Bien con bootstrap4 no es necesario el width y height ya que ya tiene implementado unas clases para esto h-100 , w-100 , para que funcione hay que setear el height al 100% con CSS simple .

La clase contenedora deberá ser .container-fluid para que ocupe todo el ancho de la ventana , y lo más importante es los hijos tengan la clase col-md-6 m-0 p-0 para que ocupen la mitad de contenedor con margin y padding en 0

html,body {
  height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<h1>Vota!</h1>

<div id="main" class="container-fluid h-100">
	<div class="row h-100">
      <button type="button" name="yes" class="col-md-6 m-0 p-0">
        <img class="col-md-12 m-0 p-0"  src="https://upload.wikimedia.org/wikipedia/commons/1/13/Facebook_like_thumb.png">
      </button>
      <button type="button" name="no" class="col-md-6 m-0 p-0" >
        <img  class="col-md-12 m-0 p-0" src="https://upload.wikimedia.org/wikipedia/commons/2/21/Not_facebook_dislike_thumbs_down.png">
      </button>
    </div>
</div>

1
  • Genial, justo lo que buscaba. Muchas gracias :D
    – MatiEzelQ
    el 9 mar. 2018 a las 21:05
0

Tal vez este snippet te pueda ayudar, si es lo que necesitas

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1>Vota!</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
        <button class="btn btn-default" style="width: 100%;">
             <img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Facebook_like_thumb.png" width="100" />
        </button>
        </div>
        <div class="col-md-6">
        <button class="btn btn-default" style="width: 100%;">
             <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Not_facebook_dislike_thumbs_down.png" width="100" />
        </button>
        </div>
    </div>
</div>
0

También podrías hacerlo con estilos.

<div id="main" class="container" style="display: flex;">
      <button type="button" name="yes" style="width: 100%;">
        <img width="100px" height="100%" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Facebook_like_thumb.png">
      </button>
    <button type="button" name="no" style="width: 100%;">
        <img width="100px" height="100%" src="https://upload.wikimedia.org/wikipedia/commons/2/21/Not_facebook_dislike_thumbs_down.png">
      </button>
 </div> 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.