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

Posted 2023-03-05

【中文标题】如何在 <li> 网格上调整图像和文本的大小并使其居中？

【英文标题】：How to resize and center an image and text on <li> grid?

【发布时间】：2014-11-27 09:45:45

【问题描述】：

我有这个代码：

<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 声望”，所以我不能:( 如果有人愿意帮助我并需要查看图片，我可以发送它们或东西。谢谢！

【问题讨论】：

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

你能向我们展示你迄今为止最好的代码吗？ （比如 JSFiddle、JSBin 或类似的东西）

【参考方案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 规则中，以消除那些黑点。 （我想这就是你想要的。） 我通过设置width:15%; 使lis 响应（玩弄百分比）。 我通过设置width:90%;（和高度）和margin:5%;使图像居中。

为了使文本大小（字体大小）具有响应性，我不得不使用 javascript。它的工作原理是这样的：

在 CSS 中，我将整个正文的字体大小设置为 10pt：bodyfont-size: 10pt;。这是基本尺寸。

接下来，我给.g li 一个相对字体大小：font-size: 1em;。 1em 表示 其第一个祖先的绝对字体大小的 1 倍（因此，主体的 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 应该足够了。

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

【参考方案2】：

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

类似：

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

【参考方案3】：

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

将图像居中：

position: relative; 在你的 li 上

和position: absolute 在你的图片和

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

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