如何在<li>网格上调整和居中图像和文本？

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

我希望能够调整黄色盒子内的图片大小。我希望图片的大小几乎与黄色盒子一样大，但保持居中和文本也居中，只显示一行。我认为通过简单地更改图片大小就可以实现这一点。

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

但是图片会偏移，不居中，并且在某些方框中文本会消失。

我试了很多不同的方法，真的不知道还能怎么办了。

附：这也应该是响应式的。但我所做的只是让黄色正方形在浏览器缩小或放大时改变位置（已经够好了！）。但我也希望黄色正方形（以及其中的图像）能稍微改变大小。但我尝试的所有代码看起来都很奇怪，黄色的方块会跳动，创建出错位的空隙。（这不是优先考虑的事情，只是我想添加的一些东西，如果可能的话）

我对html和css都很陌生，所以这对我来说有点困难！非常感谢您的帮助。

我尝试上传照片来展示问题，但似乎需要“10声望”的权限，所以我不能:(如果有人愿意帮助我并需要查看图片，我可以发送给他们或其他什么方式。谢谢!

- Owly

---

现在尝试编辑您的帖子并添加图片。此外...尝试准备一个JSFiddle，以便我们更好地了解您的需求并帮助您解决问题。 - henser

你能展示一下你迄今为止的最好的代码吗？（比如JSFiddle，JSBin或类似的东西） - gioNicol

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;，这样就可以去掉那些黑点了（我认为这是你想要的）。通过设置width:15%;（可以尝试不同的百分比），我使li具有响应性。通过设置width:90%;（和高度）和margin:5%;，我使图像居中。为了使文本大小（字体大小）具有响应性，我必须使用JavaScript。它的工作原理如下：在CSS中，我将整个body的字体大小设置为10pt：body{font-size: 10pt;}。这是基础大小。接下来，我为.g li设置相对字体大小：font-size: 1em;。1em意味着绝对字体大小的第一个祖先的1倍（因此为body的10pt）。如果您想要更大的起始字体大小，请不要更改body的字体大小，而是改变.g li的字体大小（例如12pt的1.2em）！最后，在window.onload和window.onresize上调用resize()函数。在该函数中，我使用以下行更改body的字体大小：

document.getElementsByTagName("body")[0].style.fontSize = 10 * (getPageWidth()/1366) +'pt';

'1366'是您的基础宽度，请将其更改为开发监视器的宽度。函数getPageWidth()仅用于跨浏览器功能。如果您只为HTML5的新浏览器开发，则认为window.innerWidth应该足够了。（我仅出于测试目的给图像添加了蓝色背景，可以去掉。）

- myfunkyside

Answer 2

尝试在图像上使用max-width: 100%;而不是width: 300px;，以使图像保持在li中。

要将您的图像居中：

在li上使用position: relative; 在图像上使用position: absolute并设置您的图像position与top、right、bottom、left。

这些只是快速选项，如果您能添加一个jsfiddle来说明您的问题，您可能会得到更好的答案。

- Alan Dunning

Answer 3

可能更合理的做法是将盒子的大小设置为固定值，然后添加一个边框，而不是担心将图像调整到恰当的大小以使其居中。边框可以是“虚假”的填充物。首先确定盒子大小和边框，然后再调整图像。

例如：

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

- razorsyntax