none
Redimensión correcta HTML/CSS RRS feed

  • Pregunta

  • Buenas tardes me gustaría saber como puedo redimensionar correctamente los controles de mi página.

    En el CSS tengo esto y la relación que hay entre el ancho del control y el alto es de 2.66666666.

       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: auto;
       height: calc(width / 2.66666666);

    El auto funciona perfecto pero como hago lo de la altura.

    Os pongo todo el HTML y el CSS completo:

    body
    {
       background-color: #FFFFFF;
       color: #000000;
       font-family: Arial;
       font-size: 13px;
       margin: 0;
       padding: 0;
       width: 100%;
       height: 100%;
    }
    #Img5
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #Img9
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #Img8
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #Img7
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #Img2
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #Img1
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #oLabTop
    {
       border: 0px #FFFFFF solid;
       background-color: #EF761D;
       color: #FFFFFF;
       font-family: Verdana;
       font-size: 15px;
    }
    #o2
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #o8
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #Img3
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #o3
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #Img4
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #o5
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #o9
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #Img6
    {
       border: 0px #000000 solid;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    #o7
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #o6
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #o1
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }
    #o4
    {
       border: 0px #FFFFFF solid;
       background-color: #FFFFFF;
       color: #000000;
       font-family: Verdana;
       font-size: 13px;
       opacity: 0.7;
    }

    HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Página sin título</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <link href="category.css" rel="stylesheet" type="text/css">
    <link href="index.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="wb_Img5" style=";left:0px;top:528px;width:320px;height:120px;z-index:0;">
    <a href="./Nature/nature.html"><img src="images/Nature.jpg" id="Img5" alt=""></a></div>
    <div id="wb_Img9" style=";left:0px;top:1008px;width:320px;height:120px;z-index:1;">
    <a href="./Travel/travel.html"><img src="images/Travel.jpg" id="Img9" alt=""></a></div>
    <div id="wb_Img8" style=";left:0px;top:888px;width:320px;height:120px;z-index:2;">
    <a href="./Transports/transports.html"><img src="images/Transports.jpg" id="Img8" alt=""></a></div>
    <div id="wb_Img7" style=";left:0px;top:768px;width:320px;height:120px;z-index:3;">
    <a href="./Technology/technology.html"><img src="images/Technology.jpg" id="Img7" alt=""></a></div>
    <div id="wb_Img2" style=";left:0px;top:168px;width:320px;height:120px;z-index:4;">
    <a href="./Fashion/fashion.html"><img src="images/Fashion.jpg" id="Img2" alt=""></a></div>
    <div id="wb_Img1" style=";left:0px;top:48px;width:320px;height:120px;z-index:5;">
    <a href="./Art/art.html"><img src="images/Art.jpg" id="Img1" alt=""></a></div>
    <input type="button" id="oLabTop" name="" value="Choose your favorite category" style=";left:0px;top:0px;width:320px;height:48px;z-index:6;" disabled>
    <input type="button" id="o2" name="" value="Fashion" style=";left:0px;top:263px;width:320px;height:25px;z-index:7;" disabled>
    <input type="button" id="o8" name="" value="Transports" style=";left:0px;top:983px;width:320px;height:25px;z-index:8;" disabled>
    <div id="wb_Img3" style=";left:0px;top:288px;width:320px;height:120px;z-index:9;">
    <a href="./Food/food.html"><img src="images/Food.jpg" id="Img3" alt=""></a></div>
    <input type="button" id="o3" name="" value="Food" style=";left:0px;top:383px;width:320px;height:25px;z-index:10;" disabled>
    <div id="wb_Img4" style=";left:0px;top:408px;width:320px;height:120px;z-index:11;">
    <a href="./Films/films.html"><img src="images/Films.jpg" id="Img4" alt=""></a></div>
    <input type="button" id="o5" name="" value="Nature" style=";left:0px;top:623px;width:320px;height:25px;z-index:12;" disabled>
    <input type="button" id="o9" name="" value="Travel" style=";left:0px;top:1103px;width:320px;height:25px;z-index:13;" disabled>
    <div id="wb_Img6" style=";left:0px;top:648px;width:320px;height:120px;z-index:14;">
    <a href="./Sports/sports.html"><img src="images/Sports.jpg" id="Img6" alt=""></a></div>
    <input type="button" id="o7" name="" value="Technology" style=";left:0px;top:863px;width:320px;height:25px;z-index:15;" disabled>
    <input type="button" id="o6" name="" value="Sports" style=";left:0px;top:743px;width:320px;height:25px;z-index:16;" disabled>
    <input type="button" id="o1" name="" value="Art" style=";left:0px;top:143px;width:320px;height:25px;z-index:17;" disabled>
    <input type="button" id="o4" name="" value="Films" style=";left:0px;top:503px;width:320px;height:25px;z-index:18;" disabled>
    </body>
    </html>

    Una imagen de como se ve, se visualiza correctamente según hice el diseño con WYSYWIG.



    Si la contestación te ha servido de ayuda márcala como respuesta. Si lo que publico no funciona, no tengo la culpa, SOY HUMANO, no una máquina. M-Registry Cleaner, el programa que he creado con ayuda del foro, ya se puede descargar desde mi página o sino realizar alguna que otra donación en mcaresoft.wordpress.com sería de agradecer.



    • Editado LTNs lunes, 27 de julio de 2015 16:14
    lunes, 27 de julio de 2015 15:59

Respuestas

  • Lo que quieres hacer no se puede hacer actualmente con CSS.

    Podrías utilizar media queries para establecer diferentes anchos y altos para los controles en función del ancho de la pantalla, pero el efecto no sería el mismo.

    Para hacer lo que quieres habría que utilizar JavaScript o, dependiendo de qué sea lo que quieres redimensionar, jugar con imágenes con esa relación de aspecto de forma que al establecer el ancho de la imagen se establezca automáticamente el alto.


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs lunes, 3 de agosto de 2015 15:41
    lunes, 27 de julio de 2015 18:35
  • A través de media queries puedes especificar diferentes estilos para diferentes tamaños de dispositivo. Es en lo que se basan librerías como bootstrap para hacer diseños que se adapten a los diferentes tamaños de dispositivos (el famoso responsive design)

    Media Queries


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs lunes, 3 de agosto de 2015 15:41
    martes, 28 de julio de 2015 8:45

Todas las respuestas

  • Lo que quieres hacer no se puede hacer actualmente con CSS.

    Podrías utilizar media queries para establecer diferentes anchos y altos para los controles en función del ancho de la pantalla, pero el efecto no sería el mismo.

    Para hacer lo que quieres habría que utilizar JavaScript o, dependiendo de qué sea lo que quieres redimensionar, jugar con imágenes con esa relación de aspecto de forma que al establecer el ancho de la imagen se establezca automáticamente el alto.


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs lunes, 3 de agosto de 2015 15:41
    lunes, 27 de julio de 2015 18:35
  • 1- Que es eso de media query?

    2- Lo que quiero es que se adapte al tamaño del movil.


    Si la contestación te ha servido de ayuda márcala como respuesta. Si lo que publico no funciona, no tengo la culpa, SOY HUMANO, no una máquina. M-Registry Cleaner, el programa que he creado con ayuda del foro, ya se puede descargar desde mi página o sino realizar alguna que otra donación en mcaresoft.wordpress.com sería de agradecer.

    martes, 28 de julio de 2015 8:40
  • A través de media queries puedes especificar diferentes estilos para diferentes tamaños de dispositivo. Es en lo que se basan librerías como bootstrap para hacer diseños que se adapten a los diferentes tamaños de dispositivos (el famoso responsive design)

    Media Queries


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs lunes, 3 de agosto de 2015 15:41
    martes, 28 de julio de 2015 8:45