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

我有这个代码：

<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信誉"，所以我无法：（如果有人愿意帮助我并需要查看照片，我可以发送它们或其他东西。谢谢！

我希望我能正确理解你的愿望，我想这就是你想要的：

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/

我已经在.g规则中添加了list-style-type:none;，它删除了那些黑点。（我以为这就是你想要的。）
我通过设置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.2em代表12pt）
- 最后，在window.onload和window.onresize上调用函数resize()。在该函数中，我用以下行更改正文的字体大小：
  
  document.getElementsByTagName("body")[0].style.fontSize = 10 * (getPageWidth()/1366) +'pt';
  
  "1366"是您的基本宽度，请将其更改为开发监视器的宽度。
- getPageWidth()功能仅用于跨浏览器功能。如果你只为HTML5的新浏览器开发，我认为window.innerWidth就足够了。

（我只为测试目的给图像提供了蓝色背景，可以删除。）

将框的大小设置为固定的大小，然后在其周围添加边框，而不是担心图像的大小刚好使其居中，这可能是有意义的。边框可以是"假"填充物。首先从方框大小和边框开始，然后调整图像。

类似于：

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

在您的图像上尝试max-width: 100%;而不是width: 300px;，以将您的图像包含在li中。

将图像居中：

李上的position: relative;

和position: absolute

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

这些只是快速的选择，如果你能添加一个你的问题，你会得到更好的答案。

相关内容

最新更新

热门标签：