How to resize and center the image and text in the <li> grid?

Question

I have this code:

<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; }

I want to resize images inside li that are yellow. I want the images to be almost the size of a yellow border, but remain centered and the text also centered on only one line.

I thought it would be easy just by resizing images like this

.g img {
  width: 300px;
  height: 300px; 

}

but the images become inappropriate, not centered, and the text disappears in some of the boxes.

I have tried so many different things that I have no idea what else I can do.

PS. . , , - , ( !). , ( ) . , , , , , . ( , -, , )

html css, ! .

, , , , " 10", :( - , -. !

Answer 1

, , , , :

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>

: http://jsfiddle.net/0fbdgfcq/1/

---

• list-style-type:none; .g, . ( , .)
• li , width:15%; ( ).
• , width:90%; ( ) margin:5%;.

• ( ) , JavaScript. :

  • CSS 10pt: body{font-size: 10pt;}. .

  • .g li : font-size: 1em;. 1em 1x (, 10pt). , , .g li (1.2em 12pt)!

  • , resize() window.onload window.onresize. :
    
    document.getElementsByTagName("body")[0].style.fontSize = 10 * (getPageWidth()/1366) +'pt';
    
    "1366" - , .

  • getPageWidth() - . HTML5, , window.innerWidth .

( , .)

Answer 2

max-width: 100%; width: 300px;, li.

:

position: relative;

position: absolute

position top, right, bottom, left.

, jsfiddle , .

Answer 3

It may make sense to set the size of the boxes to something fixed, and then add a border around it, rather than worry about the right size of the images to center them. The border may be a “fake” filler. Start with the size of the box and the border first THEN adjust the image.

Sort of:

.g img {
  position: relative;
  width: 300px;
  height: 300px;
  top: somevalue-px;
  left: somevalue-px;
  text-align: center;
  z-index: 2;
}
li {
  width: 300px;
  height: 300px;
  border: 2px solid red;
  z-index: 1;
}