How to put responsive images

Question

How to put responsive images

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I'm developing a web page with laravel, the problem I have is that I used a template that already had everything ready, but of course I wanted to replace the images I brought with some custom ones, but when I make the browser small or "pick up" let's say menus or so, the images have a fixed size and do not adapt with the browser, it is a bit frustrating, I put the code of the login, which brings the photo by default and with mine does not adapt.

Thank you in advance

<!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

I know it's a very silly question, but it makes me pretty frustrated.

css responsive

asked by Peisou 03.07.2018 в 09:41

source

3 answers

1

What I recommend is that you look if the template brings any class that had the previous images, since these could have the css necessary for the images to be responsive.

If you use the template that you have used, I will try to contribute something else.

answered by 03.07.2018 в 12:35

0

Thanks for your comments, I have used the robust admin template, I have been looking and if it has css, doing what alex proposed, and following the advice of Iñigo, I have managed to put the image as I want, thank you very much for your contributions, so it's fun.

P.D. I'm sorry I published the question where it did not correspond.

Thank you all. Greetings!

answered by 06.07.2018 в 13:51

Get value from a hidden input What tool / s can I use to download a graphic if I use chart.js

score 1 · Accepted Answer

For anything in css to be responsive, you have to give values to the properties in% and use the query @media of css.

For example, suppose we have a tablet of 550px of width and a container that we want to remain in the middle:

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

In your case it is an image, well, using that query from which you can see more info here , I would do something like this:

@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;
   }
}

As you can see, I have determined that both the height and the width are in auto , that is, that they take the dimensions they require but we have determined a maximum , so they can be smaller , but not larger, and will adapt if the browser becomes smaller or larger.