0

Estoy desarrollando una página web con laravel, el problema que tengo es que he usado un template que ya traía todo listo, pero claro quise substituir las imágenes que traía por unas personalizadas, pero cuando hago pequeño el navegador o "recojo" digamos los menús o así, las imágenes tienen un tamaño fijo y no se adaptan con el navegador, es un poco frustrante, os pongo el código del inicio del login, que trae la foto por defecto y con la mia no se adapta.

Gracias anticipadas

<!DOCTYPE html>

<title>Login Page </title>
<link rel="apple-touch-icon" sizes="60x60" href="images/ico/apple-icon-60.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/ico/apple-icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/ico/apple-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/ico/apple-icon-152.png">
<link rel="shortcut icon" type="image/x-icon" href="images/ico/favicon.ico">
<link rel="shortcut icon" type="image/png" href="images/ico/favicon-32.png">

<!-- BEGIN VENDOR CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-- font icons -->
<link rel="stylesheet" type="text/css" href="fonts/icomoon.css">
<link rel="stylesheet" type="text/css" href="fonts/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/sliders/slick/slick.css">
<link rel="stylesheet" type="text/css" href="vendors/css/extensions/pace.css">

<link rel="stylesheet" type="text/css" href="vendors/css/forms/icheck/icheck.css">
<link rel="stylesheet" type="text/css" href="vendors/css/forms/icheck/custom.css">
<!-- END VENDOR CSS -->
<!-- BEGIN ROBUST CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/colors.css">
<!-- END ROBUST CSS -->
<!-- BEGIN Page Level CSS -->
<link rel="stylesheet" type="text/css" href="css/core/menu/menu-types/horizontal-menu.css">
<link rel="stylesheet" type="text/css" href="css/core/menu/menu-types/vertical-overlay-menu.css">
<link rel="stylesheet" type="text/css" href="css/pages/login-register.css">

<!-- END Page Level CSS -->
<!-- BEGIN Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/app.css">
<!-- END Custom CSS -->

Login

Se que es una pregunta muy tonta, pero me tiene bastante frustado.

1
  • Esto nada tiene que ver con Laravel o blade, ni siquiera con PHP. Te cambio las etiquetas a CSS, ya que sera más fácil que te puedan ayudar si etiquetas correctamente la pregunta.
    – Xerif
    Commented el 3 jul. 2018 a las 10:00

3 respuestas 3

1

Para que cualquier cosa en css sea responsive, hay que dar valores a las propiedades en % y usar la query @media de css.

Por ejemplo, supongamos que tenemos una tablet de 550px de ancho y un container que quedemos que se quede en el medio:

@media only screen and (max-width: 600px) {
   .container {
      position: absolute;
      left: 50%;
   }
}

En tu caso es una imagen, bien, pues usando esa query de la que puedes ver más info aquí, yo haría algo así:

@media only screen and (max-width: 600px) {
   /*Suponemos que pretendes mostrarlo en un movil, usando esta regla se puede adaptar a cualquier pantalla */
   .img {
      max-width: 999px; /*El valor máximo que quieres que tome de ancho*/
      max-height: 999px; /*El valor máximo que quieres que tome de alto*/
      height: auto;
      width: auto;
   }
}

Como puedes ver he determinado que tanto el alto como el ancho estén en auto, es decir, que tomen las dimensiones que requieran pero hemos determinado un máximo, de tal manera podrá ser más pequeño, pero no más grande, y se adaptará si el navegador se hace más pequeño o más grande.

1

Lo que te recomiendo es que mires si el template trae alguna clase que tuvieran las anteriores imagenes, ya que estos pudieran tener el css necesario para que las imagenes sean responsivas.

Sino pon el template que has utilizado he intentaré aportar algo más.

0

Gracias por sus comentarios, he utilizado el template de robust admin, he estado mirando y si que tiene css, haciendo lo que me propuso alex, y siguiendo los consejos de Iñigo, he conseguido poner la imagen como yo quiero, muchas gracias por sus aportaciones, asi da gusto.

P.D. Siento haber publicado la pregunta donde no correspondia.

Gracias a todos. Saludos!

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.