Question

I am trying to create something like this:

更具体地说，我想要将图像放在中间（水平和垂直）以及根据屏幕尺寸调整大小的图像，如上图所示。问题和我的问题是如何通过使用％来同时调整高度和宽度，同时将它们对齐在中间（水平和垂直）以及所有这些在<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>调整的东西，但没有一个对我有用。我认为这是因为我有两个。我也使用bootstrap。你能帮助我吗？提前谢谢。

Answer 1

如果您希望图像保持其宽高比，并且如果您可以使用flexbox（从IE 10开始支持），您可以使用容器.box元素占据屏幕高度的100％。通过将justify-content和align-items设置为center，您可以将.box的内容设为中心。 <a>获取.box__centered类，根据.box设置宽度，<img>获取.box__image类，使其与父级一样宽<a>元素。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您无法使用flexbox，则可以将.box__centered的左上角放在屏幕中央，然后使用transform将其向左轻推一点放置它的中心位于屏幕中央。

＆＃13;

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

＆＃13;

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

＆＃13;

对于这两种技术，请参阅CSS技巧＆＃39; Centering in CSS: A Complete Guide文章。

Answer 2

您需要以％表示图像宽度值。并从各方面锚定在中心：

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

Answer 3

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

另请查看jQuery可能为您提供的内容。

Answer 4

你应该将图像作为锚的背景

图片<a> vertical & horizontal align center and resize with % in both

4 个答案:

图片<a> vertical &amp; horizontal align center and resize with % in both

4 个答案:

图片<a> vertical & horizontal align center and resize with % in both