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;

}

但图像不合适，没有居中，文字在某些方框中消失。

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

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表示其第一个祖先大小的1倍，绝对字体大小（因此，正文为10pt）。 如果你想要一个更大的文本起始字体大小，请不要改变正文的字体大小，而是改为改变.g li的字体大小（1.2em为{{1}例如）！
- 最后，我在12pt和resize()上调用了window.onload函数。在该函数中，我用这一行改变了body的font-size：
  
  window.onresize
  
  '1366'是您的基本宽度，将其更改为开发监视器的宽度。
- document.getElementsByTagName("body")[0].style.fontSize = 10 * (getPageWidth()/1366) +'pt';功能仅适用于跨浏览器功能。如果你只是为使用HTML5的新浏览器开发，我认为getPageWidth()就足够了。

（我将图像设为蓝色背景仅用于测试目的，可以删除。）

Answer 2

在您的图片上尝试max-width: 100%;而不是width: 300px;，以便将图片保存在li中。

使图像居中：

你的李

position: relative;

您的图片上有

和position: absolute

使用position设置您的图片top, right, bottom, left。

这些只是快速选项，如果您可以添加一个问题，那么您将获得更好的答案。

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

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

3 个答案: