Tema: varios div mismo tamaño, imágenes diferentes tamaños
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/06/2015, 13:37
fersosa
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 1
varios div mismo tamaño, imágenes diferentes tamaños
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
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html" />
  5.     <meta name="author" content="" />
  6.     <link rel="stylesheet" href="../responsive/estiloinicioretrato.css"/>
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.  
  9.  
  10.     <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
  11.     <link rel="stylesheet" type="text/css" href="../responsive/estilomenu2.css" media="all" />
  12.     <script src="blank.gif" data-src="../responsive/js/jquery-1.7.2.min.js"></script>
  13.  
  14.  
  15.  
  16.  
  17. <style>
  18. .text {font-size:120%; font-family:verdana; color:black; text-decoration:none}
  19. .text:hover {font-size:120%; font-family:verdana; color:#BFA62B; text-decoration:none}
  20. </style>
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.     <!-- jQuery lib from google server ===================== -->
  29.     <script src="../PruebaMenuResponsive/js/jquery-1.7.2.min.js"></script>
  30.  
  31. <!--  javaScript -->
  32.  
  33.     <script> 
  34.  
  35.     <!--  // building select nav for mobile width only -->
  36.     $(function(){
  37.         // building select menu
  38.         $('<select />').appendTo('nav');
  39.      
  40.  
  41.         // building an option for select menu
  42.         $('<option />', {
  43.             'selected': 'selected',
  44.             'value' : '',
  45.             'text': 'Contenido...'
  46.         }).appendTo('nav select');
  47.      
  48.  
  49.         $('nav ul li a').each(function(){
  50.             var target = $(this);
  51.      
  52.  
  53.             $('<option />', {
  54.                 'value' : target.attr('href'),
  55.                 'text': target.text()
  56.             }).appendTo('nav select');
  57.  
  58.  
  59.  
  60.         });
  61.  
  62.      
  63.         // on clicking on link
  64.         $('nav select').on('change',function(){
  65.             window.location = $(this).find('option:selected').val();
  66.         });
  67.     });
  68.     // show and hide sub menu
  69.     $(function(){
  70.         $('nav ul li').hover(
  71.             function () {
  72.                 //show its submenu
  73.                 $('ul', this).slideDown(150);
  74.             },
  75.             function () {
  76.                 //hide its submenu
  77.                 $('ul', this).slideUp(150);        
  78.             }
  79.         );
  80.     });
  81.     //end
  82.     </script>
  83.     <title>Sin título 1</title>
  84. </head>
  85.  
  86. <body>
  87.  
  88. <div id="general">
  89.     
  90.  
  91.   
  92. <div id="cabecera"> 
  93.     <img src="../responsive/images/logohoracio.jpg" align="left"/>
  94. </div>
  95.         
  96.            
  97.     
  98.  
  99.     
  100. <!-- SECCION MENU -->     
  101.   <div id="cuadromenu">
  102.         <div id="fdw">
  103.                 <!--nav-->
  104.                     <nav>
  105.                         <ul>
  106.                             <li class="current"><a href="../PruebaMenuResponsive/index2.html">Inicio</a></li>
  107.                             <li><a href="../PruebaMenuResponsive/index2.html">Libros<span class="arrow"></span></a>
  108.                                 <ul style="display: none;" class="sub_menu">
  109.                                     <li class="arrow_top"></li>
  110.                                     <li><a href="../PruebaMenuResponsive/index2.html">Infantil</a></li>
  111.                                     <li><a href="../PruebaMenuResponsive/index2.html">Poesía</a></li>
  112.                                     <li><a href="../responsive/narrativa.html">Narrativa</a></li>
  113.                                 </ul>
  114.                             </li>
  115.                             <li><a href="../PruebaMenuResponsive/index2.html">Reseñas</a></li>
  116.                             <li><a href="../PruebaMenuResponsive/index2.html">Contacto</a></li>
  117.                             
  118.                         </ul>
  119.                     </nav>
  120.         </div>
  121. </div>
  122. <!-- FIN SECCION MENU -->
  123.  
  124.              <!-- SECCION CONTENIDO -->
  125. <div id="contenido">
  126.  
  127.  
  128.   <div id="content">
  129.    <fieldset id="desc">
  130.     <legend><font color = "white">Reseñas</font></legend>
  131.    <p id="textocentrado"><font color = "gray">Haga click en las imágenes para ver en tamaño grande las reseñas</p>
  132.    
  133.         <div id="libros"> 
  134.         
  135.         <div id="cuadros"><p><font color = "white">Brecha</font></p>
  136.             <a href="../responsive/images/resenas/descendencia/Brecha21912ElPoetaGenealógicoALvaroOJeda.jpg"><img src="../responsive/images/resenas/descendencia/Brecha21912ElPoetaGenealógicoALvaroOJeda.jpg" align="left"/></a>
  137.                 </div>
  138.         <div id="cuadros"><p><font color = "white">El cultural</font></p>
  139.             <a href="../responsive/images/resenas/descendencia/DescendenciaElCultural.jpg"><img src="../responsive/images/resenas/descendencia/DescendenciaElCultural.jpg" align="left"/></a>
  140.                 </div>
  141.         <div id="cuadros"><p><font color = "white">El Jorobado de las Alas Enormes</font></p>
  142.             <a href="../responsive/narrativa.html"><img src="../responsive/images/resenas/descendencia/ElCantoDeLaEstirpe-LaDiaria5-11-2012GerardoFerreira.jpg" align="left"/></a>
  143.                 </div>
  144.            
  145.          
  146.            
  147.     </div>
  148.   
  149.    </fieldset>
  150.   </div>
  151.     </div>
  152.  
  153. </div>    
  154.     
  155.     
  156. </body>
  157. </html>


Código CSS: 
Ver original
  1. * {
  2.     margin: 0;
  3.     padding-top: 0%;
  4.     padding-right: 0%;
  5.     padding-bottom: 0%;
  6.     padding-left: 0%;
  7. }
  8. body {
  9.     background: black;
  10.     font-family: Arial;
  11. }
  12. #general {
  13.     width: 100%;
  14.     max-width: 1000px;
  15.     margin: 0% auto;
  16.     overflow: hidden;
  17.     text-align: justify;
  18. }
  19. #cabecera {
  20.     margin: 1%;
  21.     width: 100%;
  22.     height: auto;
  23.     float: left;
  24. }
  25. #cabecera img {
  26.     width: 75%;
  27.     height: auto;
  28. }
  29. #cuadromenu {
  30.     width: 55%;
  31.     height: 50%;
  32.     background-color: black;
  33.     padding: 0%;
  34.     clear: both;
  35.     margin:0 auto;
  36. }
  37. #cuadros {
  38.     width: 20%;
  39.     height: 20%;
  40. }
  41. #fdw {
  42.     text-align: left;
  43.     margin:0 auto;
  44.     display: inline-block;
  45.     
  46. }
  47. #menu {
  48.     margin: auto;
  49.     text-align: center;
  50. }
  51. #content {
  52.     width: 100%;
  53. }
  54. #content img {
  55.     width: 30%;
  56.     padding: 1%;
  57. }
  58. #contenido {
  59.     width: 100%;
  60.     padding: 0%;
  61.     float: left;
  62.     margin-left: auto;
  63.     margin-right: auto;
  64. }
  65. #textogeneral {
  66.     text-align: justify;
  67.     padding: 10px 10px 10px 10px;
  68. }
  69. #textocentrado {
  70.     text-align: center;
  71.     padding: 10px 10px 10px 10px;
  72. }
  73. #biografia {
  74.     width: 90%;
  75.     margin-left: auto;
  76.     margin-right: auto;
  77. }
  78. #libros {
  79.     width: 100%;
  80.     padding: 20px;
  81.     height: auto;
  82.     text-align: center;
  83. }
  84. #libros div {
  85.   display: inline-block;
  86.   width: 20%;
  87.   padding: 18px;
  88.   text-align: center;
  89. }
  90.  
  91. #libros #otro2 {
  92.   display: block;
  93. }
  94. #libros img {
  95.     width: 100%;
  96.     height: auto;
  97. }
  98. #narrativa {
  99.     text-align: center;
  100.     font: 200% Arial;
  101.     word-wrap: break-word;
  102.     white-space: nowrap;
  103. }
  104. @media all and (max-width: 480px) {
  105.   #libros div {
  106.     display: block;
  107.     width: 80%;
  108.     padding: 10px;
  109.   }
  110. }


gracias!