Question

我遇到了一个棘手的问题。在缩放图像后，我需要将水平和垂直图像居中。这是我的HTML：

＆＃13;

li {
  float: left;
  padding: .78125%;
  width: 31.25%;
  
  /*li tag height and width is not fixed for screen adaptation*/
}

＆＃13;

<!-- The code run in mobile browser.So do not think too much fu*king compatibility-->
<ul>
  <li>
    <a href="link">
      <img class="lazy" src="" data-original="">
    </a>
  </li>
  <li>
    <a href="link">
      <img class="lazy" src="" data-original="">
    </a>
  </li>
  <li>
    <a href="link">
      <img class="lazy" src="" data-original="">
    </a>
  </li>
 </ul>

＆＃13;

问题是，图像尺寸不固定，它们会按原始比例缩放。缩放后，我需要将水平和垂直图像居中。

我可以在不缩放的情况下居中水平和垂直图像。但如果需要扩展，我无法处理它。

（ps：请原谅我可怜的英语。你能理解我的问题吗？）

Answer 1

您可以利用CSS为您执行此操作。只需将背景图像附加到div，就像这样：

<div class="resize-me" style=" background-image: url('http://dynamically/generated/url/here'); "></div>

然后在你的css中这样做：

.resize-me { 
    background-size: cover; 
    width: 200px; 
    height: 200px;
}

这样，您附加的网址可以是任意大小，CSS会将图像向上或向下缩放为resize-me类的宽度和高度。它还应该每次都正确地居中图像。

基本上，当您使用cover时，CSS将确定最适合图像以完全覆盖div的背景。因此，如果您想调整div的大小，则不必对图像进行任何手动缩放。这基本上与开发人员用于标准图像的技巧相同，您可以在块级图像上使用剪切蒙版div。不同之处在于它自动进行居中，您只需要创建一个DOM元素。

如何在缩放图像后水平和垂直居中图像？

1 个答案: