¿Cómo puedo redimensionar y centrar imágenes y texto en una cuadrícula <li>? </li>

Detalles del problema

tengo el siguiente código:
<div>
 <ul class="g">
  <li><a href="proj1.html"><img src="img/prev1.jpg" /></a><p>Only God Forgives</p></li>
  <li><a href="proj1.html"><img src="img/prev2.jpg" /></a><p>Place To be</p></li>
  <li><a href="proj1.html"><img src="img/prev3.jpg" /></a><p>Smokey Taboo</p></li>
  <li><a href="proj1.html"><img src="img/prev4.jpg" /></a><p>Pagan Poetry</p></li>
  <li><a href="proj1.html"><img src="img/prev1.jpg" /></a><p>Into The Wild</p></li>
  <li><a href="proj1.html"><img src="img/prev2.jpg" /></a><p>Mad G Wine</p></li>
  <li><a href="proj1.html"><img src="img/prev3.jpg" /></a><p>Milk And Beach</p></li>
  <li><a href="proj1.html"><img src="img/prev4.jpg" /></a><p>Song To The Siren</p></li>
  <li><a href="proj1.html"><img src="img/prev1.jpg" /></a><p>Where The Wild Things Are</p></li>
  <li><a href="proj1.html"><img src="img/prev2.jpg" /></a><p>At Night in Dreams</p></li>
</div>


.g {
  margin: 2%;
}
.g li {
  float: left;
  margin: 0.5%;
  text-align: center;
  background-color: yellow;
  height: 100px;
  width: 100px;
}
.g img {
  width: 100px;
  height: 100px; }
Quiero cambiar el tamaño de las imágenes en Li, son cajas amarillas. Quiero que la imagen sea del mismo tamaño que la Caja amarilla, pero concéntrate, y el texto también, en una sola línea.
Creo que sería fácil simplemente cambiar el tamaño de una imagen como esta
.g img {
  width: 300px;
  height: 300px; 
}
Pero la imagen no está en su lugar, no está centrada, y el texto desaparece en algunas cajas.
He intentado muchas cosas diferentes y no sé qué más hacer.
Nota: Esto también debe ser sensible. Pero to do lo que puedo hacer es hacer que la Caja amarilla cambie de posición (lo suficientemente bueno!) Cuando el navegador se encoja o amplíe. Pero también espero que los cuadrados amarillos (y las imágenes en ellos) cambien ligeramente de tamaño. Pero cada código que he intentado hace que parezca extraño, y las cajas amarillas saltan a través de espacios en blanco, creando brechas entre sí si no deben saltar. (esta no es una prioridad, y me gustaría a ñadirla si es posible.)
¡No estoy familiarizado con HTML y CSS, así que es un poco difícil para mí! Le agradezco su ayuda.
Traté de subir fotos para mostrar el problema, pero parecía que necesitaba "10 reputaciones", por lo que no pude: (si alguien quería ayudarme y necesitaba ver las fotos, podría enviarlas o algo así. Gracias!

La mejor solución

espero haber entendido bien sus deseos, y creo que eso es lo que quieres:
window.onload = resize;
window.onresize = resize;

//GET PAGE WIDTH---------------------------------
function getPageWidth() {
  if (typeof(window.innerWidth) == 'number') { //non-IE
    return window.innerWidth;
  } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE6+ in 'standards compliant mode'
    return document.documentElement.clientWidth;
  } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE4 compatible
    return document.body.clientWidth;
  }
}

//RESIZE-----------------------------------------
function resize() {
  document.getElementsByTagName("body")[0].style.fontSize = 10 * (getPageWidth()/1366) +'pt'; //1366 is your base-width, change it to the width of your development-monitor
}
body {
  font-size: 10pt;
}

.g {
  margin: 2%;
  list-style-type: none;
}
.g li {
  float: left;
  margin: 0.5%;
  width: 15%;
  height: auto;
  background-color: yellow;
  text-align: center;
  font-size: 1em;
}
.g img {
  width: 90%;
  height: 90%;
  margin: 5%; /*must be half of '100% - width'*/
  background: blue; /*FOR TESTING ONLY*/
}
<div>
  <ul class="g">
    <li><a href="proj1.html"><img src="img/prev1.jpg" /></a><p>Only God Forgives</p></li>
    <li><a href="proj1.html"><img src="img/prev2.jpg" /></a><p>Place To be</p></li>
    <li><a href="proj1.html"><img src="img/prev3.jpg" /></a><p>Smokey Taboo</p></li>
    <li><a href="proj1.html"><img src="img/prev4.jpg" /></a><p>Pagan Poetry</p></li>
    <li><a href="proj1.html"><img src="img/prev1.jpg" /></a><p>Into The Wild</p></li>
    <li><a href="proj1.html"><img src="img/prev2.jpg" /></a><p>Mad G Wine</p></li>
    <li><a href="proj1.html"><img src="img/prev3.jpg" /></a><p>Milk And Beach</p></li>
    <li><a href="proj1.html"><img src="img/prev4.jpg" /></a><p>Song To The Siren</p></li>
    <li><a href="proj1.html"><img src="img/prev1.jpg" /></a><p>Where The Wild Things Are</p></li>
    <li><a href="proj1.html"><img src="img/prev2.jpg" /></a><p>At Night in Dreams</p></li>
  </ul>
</div>
Violín: http://jsfiddle.net/0fbdgfcq/1/
  • he añadido list-style-type:none; a la regla .g para eliminar estos puntos negros. Creo que eso es lo que quieres.
  • respondo estableciendo li (porcentaje de ajuste).
  • centré la imagen estableciendo width:15%; (y altura) y width:90%;.
  • para que el tamaño del texto (tamaño de la fuente) Responda, debo usar javascript. Funciona de la siguiente manera:
  • en css, establecí el tamaño de fuente de todo el cuerpo a 10pt: margin:5%;. Este es el tamaño básico.
  • A continuación, le doy a body{font-size: 10pt;} un tamaño de fuente relativo: .g li. font-size: 1em; representa el tamaño de 1x y el tamaño absoluto de la fuente de su primer antepasado (por lo tanto, 10pt del cuerpo). ¡Si desea que el texto comience con un tamaño de fuente más grande, en lugar de cambiar el tamaño de fuente del cuerpo, cambie el tamaño de fuente de 1em (por ejemplo, .g li representa 1.2em)! Finalmente, invoco la función 12pt en resize() y window.onload. En esta función, utilizo las siguientes líneas para cambiar el tamaño del tipo de letra del cuerpo:window.onresize"1366"es el ancho básico que se cambia al ancho del monitor de desarrollo. La funcionalidad
  • document.getElementsByTagName("body")[0].style.fontSize = 10 * (getPageWidth()/1366) +'pt'; se utiliza sólo para funciones de navegador cruzado. Si usted está desarrollando sólo un nuevo navegador para HTML5, creo que getPageWidth() es suficiente.
  • He a ñadido un fondo azul a la imagen, sólo para fines de prueba, se puede borrar.