Tamaño imagenes proporcional a resolucion dentro de tabla

Hanzo_lx · #1 (**permalink**) 14/05/2013, 07:07

Buenos dias,

A ver si alguien puede decirme que hago mal,

Tengo una tabla con dos filas y dos celdas contenida en un div

Código:

<div class="menu_box">
            <table>
            <tr>
                <td><img src="styles/images/new.png" class="ticket_button"></td>
                <td><img src="styles/images/inbox.png" class="inbox_button"></td>
            </tr>
            <tr> 
                <td><img src="styles/images/profile.png" class="profile_button"></td>
                <td><img src="styles/images/contact.png" class="contact_button"></td>
            </tr>
            </table>
            </div>

Ademas, una hoja de estilos CSS

Código:

.menu_box{
    background-color: white;
    position:absolute;
    top:30%;
    left: 10%;
    width: auto;
    height: 36.5%
}

.menu_box table{
    height: 100%;
    width: 100%;
}

.menu box td{
    
    display: block;
    width:auto;
    height: 13%;
}
.ticket_button{
     width: auto;
    height: auto;    
}

.profile_button {

    width: auto;
    height: auto; 
}
.inbox_button {

    width: auto;
    height: auto; 
   
}
.contact_button {

    width: auto;
    height:auto; 
}

Las imagenes son mas altas que anchas ademas, quiero que segun la resolucion se redimensionen proporcionalmente, de ahi el "auto" de las imagenes y el del div "menu_box".

El tema es que cuando disminuyo la resolucion de 1280x1024 a 1024x768 las imagenes deberian de verse mas pequeñas adaptandose al nuevo tamaño de la celda que es en alto el 13% de la tabla que esta a su vez es el 100% del alto del div ,pero lo ignora totalmente.

Igual lo estoy mareando mucho

Muchas gracias por adelantado

pzin · #2 (**permalink**) 14/05/2013, 07:16

Yo cambiaría esto:

Código CSS:

Ver original.ticket_button{
  width: auto;
  height: auto;    
}
 
.profile_button {
  width: auto;
  height: auto; 
}
.inbox_button {
  width: auto;
  height: auto; 
}
.contact_button {
  width: auto;
  height:auto; 
}

Por esto:

Código CSS:

Ver original.menu_box table img {
 width: 100%;
}

La altura se adaptaría sola. Si lo necesitas al revés, pues especificas el alto al 100%. Si necesites poner un tope, podrías también incluir un max-width o max-height.

Hanzo_lx · #3 (**permalink**) 14/05/2013, 07:56

Es que me el div menu_box que contiene a la tabla forma parte del div principal, menu_box es un 36% de alto del div principal y de ancho esta en auto.

menu_box td{} deberia ser un 50% en alto sobre el tamaño de la tabla no? La sintaxis es buena o deberia poner .menu_box table td{} ?

Luego poniendo lo que ru comentas con .menu_box table img{ height:100%} las imagenes deberian pillar el alto total de la celda y el ancho lo pillaria auto proporcionalmente a la altura de la celda.

Esque tengo la sensacion que donde le pongo 100% a la anchura de la tabla, como el div que la contiene en la propiedad width tiene un auto me da ami que no funciona lo de 100% de auto

Gracias

Hanzo_lx · #4 (**permalink**) 15/05/2013, 02:10

He cambiado el codigo un poco porque me estoy volviendo loco

Código:

         <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="styles/style.css" type="text/css" />

    </head>
    <body>  
           <div class="container trans">
           <table class="menu_box">
            <tr>
                <td><img src="styles/images/new.png"></td>
                <td><img src="styles/images/inbox.png"></td>
            </tr>
            <tr> 
                <td><img src="styles/images/profile.png"></td>
                <td><img src="styles/images/contact.png"></td>
            </tr>
            </table>
           </div>
</body> 
</html>

y la hoja de estilos

Código:

html,body{


    background: #d0d4d1 url('images/blue2.jpg') no-repeat;
    width: 100%;
    height:100%;
    overflow-x: hidden;
    overflow-y: hidden;

}

.container {
    margin-top: 25px;
    margin-left: 45px;
    width: 90%;
    height: 90%;
    padding: 10px;
    background:rgba(0,0,0,0.5); /*0.5 De Transparencia*/
}

.menu_box{
    position:absolute;
    top:30%;
    left: 10%;
    width:auto;
    height: 34.5%;
    background-color: blue;
    border-spacing: 0;
    border-width: 0px;
    padding: 0px;
}

.menu_box td{ height: 50%;}

.menu_box img{height: 100%;}

El tema es que me ignora completamente, la idea es que poniendole de height a la tabla directamente (.menu_box) un 34.5% cuando ponga una resolucion mayor las imagenes deberian de hacerse mas pequeñas por que con

.menu_box img{height: 100%;}

hacen el alto de 100% de la celda que a su vez cada celda es el 50% de alto de la tabla.

A alguien se le ocurre que hago mal?

gracias y perdon por el tocho

Hanzo_lx · #5 (**permalink**) 16/05/2013, 03:37

Hola me respondo a mi mismo en parte, por lo visto el problema residia en que no habia definido el tamaño height del padre inmediato de la celda, el tr y del tr el tbody

el estilo a quedado tal que asi

Código:

/*CAJA MENU*/
.menu_box{
    position:absolute; top:30%; left: 10%;
    height: 34.5%; padding: 2px; border-width: 0px;    
}

.menu_box tbody{height: 100%;}
.menu_box tr td{height: 50%;}
.menu_box td.right{text-align: right}
.menu_box td.left{text-align: left;}
.menu_box img{height: auto; width: auto; max-height: 100%;}

Ahora bien, funciona perfecto en Firefox y IE, pero no en Chrome, curiosamente. Creo que es porque la forma de interpretar el tamaño de los "padres" en chrome es distinto.

Que os parece?