varios div mismo tamaño, imágenes diferentes tamaños

fersosa · #1 (**permalink**) 07/06/2015, 13:37

Hola gente.
tengo que crear varios div con un mismo tamaño. éstos tienen una imagen dentro, cada una de esas imágenes tiene un tamaño diferente.
Quiero tener esos div iguales y que las imágenes se escalen automáticamente para acomodarse al div.

paso códigos.

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="" />
    <link rel="stylesheet" href="../responsive/estiloinicioretrato.css"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../responsive/estilomenu2.css" media="all" />
    <script src="blank.gif" data-src="../responsive/js/jquery-1.7.2.min.js"></script>
 
 
 
 
<style>
.text {font-size:120%; font-family:verdana; color:black; text-decoration:none}
.text:hover {font-size:120%; font-family:verdana; color:#BFA62B; text-decoration:none}
</style>
 
 
 
 
 
 
 
    <!-- jQuery lib from google server ===================== -->
    <script src="../PruebaMenuResponsive/js/jquery-1.7.2.min.js"></script>
 
<!--  javaScript -->
 
    <script> 
 
    <!--  // building select nav for mobile width only -->
    $(function(){
        // building select menu
        $('<select />').appendTo('nav');
     
 
        // building an option for select menu
        $('<option />', {
            'selected': 'selected',
            'value' : '',
            'text': 'Contenido...'
        }).appendTo('nav select');
     
 
        $('nav ul li a').each(function(){
            var target = $(this);
     
 
            $('<option />', {
                'value' : target.attr('href'),
                'text': target.text()
            }).appendTo('nav select');
 
 
 
        });
 
     
        // on clicking on link
        $('nav select').on('change',function(){
            window.location = $(this).find('option:selected').val();
        });
    });
    // show and hide sub menu
    $(function(){
        $('nav ul li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(150);
            },
            function () {
                //hide its submenu
                $('ul', this).slideUp(150);        
            }
        );
    });
    //end
    </script>
    <title>Sin título 1</title>
</head>
 
<body>
 
<div id="general">
    
 
  
<div id="cabecera"> 
    <img src="../responsive/images/logohoracio.jpg" align="left"/>
</div>
        
           
    
 
    
<!-- SECCION MENU -->     
  <div id="cuadromenu">
        <div id="fdw">
                <!--nav-->
                    <nav>
                        <ul>
                            <li class="current"><a href="../PruebaMenuResponsive/index2.html">Inicio</a></li>
                            <li><a href="../PruebaMenuResponsive/index2.html">Libros<span class="arrow"></span></a>
                                <ul style="display: none;" class="sub_menu">
                                    <li class="arrow_top"></li>
                                    <li><a href="../PruebaMenuResponsive/index2.html">Infantil</a></li>
                                    <li><a href="../PruebaMenuResponsive/index2.html">Poesía</a></li>
                                    <li><a href="../responsive/narrativa.html">Narrativa</a></li>
                                </ul>
                            </li>
                            <li><a href="../PruebaMenuResponsive/index2.html">Reseñas</a></li>
                            <li><a href="../PruebaMenuResponsive/index2.html">Contacto</a></li>
                            
                        </ul>
                    </nav>
        </div>
</div>
<!-- FIN SECCION MENU -->
 
             <!-- SECCION CONTENIDO -->
<div id="contenido">
 
 
  <div id="content">
   <fieldset id="desc">
    <legend><font color = "white">Reseñas</font></legend>
   <p id="textocentrado"><font color = "gray">Haga click en las imágenes para ver en tamaño grande las reseñas</p>
   
        <div id="libros"> 
        
        <div id="cuadros"><p><font color = "white">Brecha</font></p>
            <a href="../responsive/images/resenas/descendencia/Brecha21912ElPoetaGenealógicoALvaroOJeda.jpg"><img src="../responsive/images/resenas/descendencia/Brecha21912ElPoetaGenealógicoALvaroOJeda.jpg" align="left"/></a>
                </div>
        <div id="cuadros"><p><font color = "white">El cultural</font></p>
            <a href="../responsive/images/resenas/descendencia/DescendenciaElCultural.jpg"><img src="../responsive/images/resenas/descendencia/DescendenciaElCultural.jpg" align="left"/></a>
                </div>
        <div id="cuadros"><p><font color = "white">El Jorobado de las Alas Enormes</font></p>
            <a href="../responsive/narrativa.html"><img src="../responsive/images/resenas/descendencia/ElCantoDeLaEstirpe-LaDiaria5-11-2012GerardoFerreira.jpg" align="left"/></a>
                </div>
           
         
           
    </div>
  
   </fieldset>
  </div>
    </div>
 
</div>    
    
    
</body>
</html>

Código CSS:

Ver original* {
    margin: 0;
    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
}
body {
    background: black;
    font-family: Arial;
}
#general {
    width: 100%;
    max-width: 1000px;
    margin: 0% auto;
    overflow: hidden;
    text-align: justify;
}
#cabecera {
    margin: 1%;
    width: 100%;
    height: auto;
    float: left;
}
#cabecera img {
    width: 75%;
    height: auto;
}
#cuadromenu {
    width: 55%;
    height: 50%;
    background-color: black;
    padding: 0%;
    clear: both;
    margin:0 auto;
}
#cuadros {
    width: 20%;
    height: 20%;
}
#fdw {
    text-align: left;
    margin:0 auto;
    display: inline-block;
    
}
#menu {
    margin: auto;
    text-align: center;
}
#content {
    width: 100%;
}
#content img {
    width: 30%;
    padding: 1%;
}
#contenido {
    width: 100%;
    padding: 0%;
    float: left;
    margin-left: auto;
    margin-right: auto;
}
#textogeneral {
    text-align: justify;
    padding: 10px 10px 10px 10px;
}
#textocentrado {
    text-align: center;
    padding: 10px 10px 10px 10px;
}
#biografia {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#libros {
    width: 100%;
    padding: 20px;
    height: auto;
    text-align: center;
}
#libros div {
  display: inline-block;
  width: 20%;
  padding: 18px;
  text-align: center;
}
 
#libros #otro2 {
  display: block;
}
#libros img {
    width: 100%;
    height: auto;
}
#narrativa {
    text-align: center;
    font: 200% Arial;
    word-wrap: break-word;
    white-space: nowrap;
}
@media all and (max-width: 480px) {
  #libros div {
    display: block;
    width: 80%;
    padding: 10px;
  }
}

gracias!

fersosa · #2 (**permalink**) 07/06/2015, 13:38

aclaro que lo estoy haciendo responsive

ArturoGallegos · #3 (**permalink**) 07/06/2015, 14:16

y el problema es? en que parte se localiza?

vamos que si no nos dices nosotros no sabremos ni que buscar o ver para ayudarte.

fersosa · #4 (**permalink**) 07/06/2015, 14:28

al ejecutar los códigos, aparecen los div de diferentes tamaños, porque toman las imágenes como referencia, lo que quiero lograr es que las imágenes se adecúen al div. o sea que las imágenes no agranden los div como está sucediendo

pzin · #5 (**permalink**) 07/06/2015, 14:31

Dales un ancho del cien por cien a las imágenes.

Por otro lado, no puedes repetir el mismo identificador en tu HTML. Para eso están las clases.

fersosa · #6 (**permalink**) 07/06/2015, 16:16

tienen
#libros img {
width: 100%;
height: auto;
}

te refieres al id "cuadros"? saqué los id, sólo dejé los div sin id.

sigo sin solucionarlo

fersosa · #7 (**permalink**) 07/06/2015, 16:32

dejo un link para que vean como me está quedando. la idea es que sean 3 cuadros iguales en tamaño.
http://www.imagebam.com/image/d3f156414280236

fede5426 · #8 (**permalink**) 07/06/2015, 17:50

Si esperas que las tres imagnes tengan el mismo alto y ancho, lamento decepcionarte pero no vas a lograr eso y a la vez que las imágenes se vean bien porque no tienen las mismas proporciones.

AngelKrak · #9 (**permalink**) 07/06/2015, 21:55

lo unico que podrias hacer es ponle una altura fija al contenedor y un scroll a las imagenes para que sean del mismo tamaño pero sin k se vean mal ;)