html - 如何在 网格上调整图像和文本的大小并使其居中？

Question

我有这个代码:

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

我想调整 li 内的图像大小，它们是黄色框。我希望图像几乎与黄色框一样大，但保持居中，文本也居中，仅在一行中。

我以为像这样简单地改变图像的大小会很容易

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

但是图像错位了，没有居中并且某些框中的文本消失了。

我尝试了很多不同的事情，我不知道我还能做什么。

附言。这也应该是响应式的。但我所能做的就是在浏览器缩小或放大时让黄色方 block 改变位置(足够好!)。但我也希望黄色方 block (连同里面的图像)会稍微改变它们的大小。但是我尝试的每一个代码都让它看起来很奇怪，黄色的方框会跳空格，在彼此之间产生不应该出现的间隙。 (这不是优先事项，只是我想在可能的情况下添加的内容)

我是 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>

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

---

• 我已将 list-style-type:none; 添加到 .g 规则中，以删除那些黑点。 (我假设这就是您想要的。)
• 我通过设置 width:15%;(调整百分比)让 li 响应。
• 我通过设置 width:90%;(和高度)和 margin:5%; 使图像居中。

• 为了使文本大小(字体大小)具有响应性，我不得不使用 JavaScript。它是这样工作的:

  • 在 CSS 中，我将整个主体的字体大小设置为 10pt:body{font-size: 10pt;}。这是基本尺寸。

  • 接下来，我给 .g li 一个相对的字体大小:font-size: 1em;。 1em 表示 1x 其第一个具有绝对字体大小的祖先的大小(因此，正文的 10pt)。 如果您想要更大的文本起始字体大小，请不要更改正文的字体大小，而是更改 .g li 的字体大小(1.2 em 例如 12pt)!

  • 最后，我在 window.onload 和 window.onresize 上调用函数 resize()。在该函数中，我用这一行更改正文的字体大小:
    
    document.getElementsByTagName("body")[0].style.fontSize = 10 * (getPageWidth()/1366) +'pt';
    
    '1366' 是你的 base-width，把它改成你的 development-monitor 的宽度。

  • getPageWidth() 函数仅用于跨浏览器功能。如果您只是为使用 HTML5 的新浏览器进行开发，我认为 window.innerWidth 应该足够了。

(我为图片设置了蓝色背景仅用于测试目的，可以将其删除。)