图片<a>垂直和水平居中对齐并使用百分比进行调整大小

Question

图片<a>垂直和水平居中对齐并使用百分比进行调整大小

3

我正在尝试创建类似于以下内容的东西：

更具体地说，我有一张图片，想让它水平和垂直居中，并根据屏幕大小调整图片的大小，就像上面的图片一样。问题是，如何使用百分比进行高度和宽度的调整，并同时将其在中心（水平和垂直）对齐，所有这些都在一个标签中。以下是我已经编写的代码：

<!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>对齐的方法，但是它们都不适用于我。我认为这是因为我两个都有。我还使用了bootstrap。你能帮我吗？谢谢。

- Asdalud

4个回答

2

你需要以百分比给出图像宽度值，并将锚点从全部位置居中：

查找演示

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

- Ganesh Yadav

你好，非常感谢您的回答，但是图片只有在我更改浏览器宽度时才会自动调整大小，而不是高度。是否可能通过高度和宽度来更改？提前致谢。 - Asdalud

但高度是自动的。它会根据图像的宽度自动调整大小。 - Ganesh Yadav

那么我们不能像width:50%一样设置height:30%吗？ - Asdalud

请查看此演示。http://jsfiddle.net/nx6t2wcL/1/ 宽度和高度分别为窗口宽度和高度的50％和30％。这是通过jquery完成的。 - Ganesh Yadav

0

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

此外，看看jQuery可以为您提供什么。

- cptstarling

0

你应该将图片设置为锚点的背景

- Hung Nguyen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ckuijjer · Accepted Answer

如果您想保持图片的纵横比，并且可以使用 flexbox（从 IE 10 开始支持），您可以创建一个容器 .box 元素，该元素占用屏幕高度的 100%。通过将 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的CSS居中：完全指南文章。