图像 <a> 垂直和水平对齐中心并在两者中都使用 % 调整大小

Posted 2023-03-06

技术标签:

【中文标题】图像 <a> 垂直和水平对齐中心并在两者中都使用 % 调整大小【英文标题】：Image <a> vertical & horizontal align center and resize with % in both 【发布时间】：2015-12-09 10:36:07 【问题描述】：

我正在尝试创建这样的东西：

更具体地说，我有一张我想放在中间（水平和垂直）的图像，以及要根据屏幕尺寸调整大小的图像，如上图所示。问题和我的问题是如何通过使用 % 来调整高度和宽度的大小，同时将它们对齐在中间（水平和垂直）并将所有这些都放在 <a> 标签中。这是我到目前为止编写的代码：

<!DOCTYPE html>
<html>
<body>

<a id="demo" style="text-align:center;display:block;vertical-align:middle;" class="btn" href="#Modal"><img src="https://media2.wnyc.org/i/620/372/l/80/1/blackbox.jpeg"></a>


</body>
</html>

我实际上已经尝试了很多我看到的 <img> 或 <a> 对齐的东西，但它们都没有对我有用。我想这是因为我两者都有。我也使用引导程序。你能帮助我吗？提前致谢。

【问题讨论】：

【参考方案1】：

我认为vw and vh units 的使用可能对您有很大帮助（对于尺寸和边距）。

还可以看看jQuery 可以为您提供什么。

【讨论】：

【参考方案2】：

您应该将图像作为锚点的背景

【讨论】：

【参考方案3】：

如果您希望图像保持其纵横比，并且您可以使用 flexbox（从 IE 10 开始支持），您可以拥有一个占屏幕高度 100% 的容器 .box 元素。通过将justify-content 和align-items 设置为center，您可以将.box 的内容居中。 <a> 得到一个 .box__centered 类，该类基于 .box 设置宽度，<img> 得到一个 .box__image 类，使其与父 <a> 元素一样宽。

body 
  margin: 0;


.box 
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;


.box__centered 
  width: 25%; /* set the percentual width here */


.box__image 
  width: 100%;
  display: block;

<div class="box">
  <a href="#" class="box__centered">
    <img src="http://placekitten.com/g/321/321" class="box__image" />
  </a>
</div>

如果你不能使用 flexbox，你可以将.box__centered 的左上角定位在屏幕的中心，然后使用transform 将其向左和向上轻推，使其中心位于屏幕的中心屏幕。

body 
  margin: 0;


.box 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;


.box__centered 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%; /* set the percentual width here */


.box__image 
  width: 100%;
  display: block;

<div class="box">
  <a href="#" class="box__centered">
    <img src="http://placekitten.com/g/321/321" class="box__image" />
  </a>
</div>

对于这两种技术，请参阅 CSS Tricks 的 Centering in CSS: A Complete Guide 文章。

【讨论】：

您好，非常感谢您的回答，但是只有当我更改浏览器的宽度而不是高度时，图片才会自行调整大小。可以改变高度和宽度吗？提前致谢。你到底想要什么？您是否希望图像保持其纵横比，所以当您例如增加宽度，高度也应该增加？您是否希望图像始终适合窗口，例如当高度变得太小时图像也会变小？我想要的是：我希望图像始终覆盖例如屏幕高度的 30%（不会像 visual.merriam-webster.com/images/communications/communications/… 那样“破坏”其正常外观）并位于中间（垂直& 水平）。抱歉，如果我没有向您说明清楚，非常感谢您的帮助。尝试给box__centered一个height: 30%和box__image一个height: 100%; width: auto【参考方案4】：

您需要以 % 为单位提供图像宽度值。并从各个方向锚定在中心：

找到fiddle demo

HTML：

<a id="demo" class="btn absoluteCenter" href="#Modal"><img src="https://media2.wnyc.org/i/620/372/l/80/1/blackbox.jpeg"></a>

CSS：

.absoluteCenter
    display:inline-block;
    position:absolute;
    text-align:center;
    top:50%;
    left:50%;
    -ms-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);    

.absoluteCenter img
    width:50%;

【讨论】：

您好，非常感谢您的回答，但是只有当我更改浏览器的宽度而不是高度时，图片才会自行调整大小。可以改变高度和宽度吗？提前致谢。但是高度是自动的。它会根据图像的宽度自动调整大小。所以我们不能有一个例如 height:30%;像宽度：50%； ? 查看这个演示。 jsfiddle.net/nx6t2wcL/1 宽度：50%；和高度：窗口宽度和高度的30%。它是由 jquery 完成的。

以上是关于图像 <a> 垂直和水平对齐中心并在两者中都使用 % 调整大小的主要内容，如果未能解决你的问题，请参考以下文章

如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]

使用CSS垂直和水平对齐（中间和中心）[重复]