位置和大小

Question

我想保留链接图像的位置和大小，如下所示：

<a href="any link"><img src="any image" alt="any name"></a>

如何使它们的尺寸和位置保持在不同的显示器尺寸上？

Answer 1

使用这样的vw和vh单位：

#id-of-image {
  width: 5vw;
  height 5vw;
}

<a href="link"><img id="id-of-image" src="file" alt="text"></a>

vw是屏幕宽度的1％。

vh是屏幕高度的1％。

css单位列表： www.w3schools.com/CSSref/css_units.asp

Answer 2

您可以将它们包装在div中，并使用CSS进行处理。设置height和width.您可以使用absolute.使位置永久化，我添加了一个红色边框来说明。您还可以查看Codepen：https://codepen.io/anon/pen/LMqyXN

您可以使用px指定位置，并且它完全不会移动，或使用％使其随视图缩放。

   .static {
border: solid;
  border-color: red;
  height: 35px;
  width: 85px;
  position: absolute;
  left: 10%;
  top: 10%;
}

<div class="static">
  <a href="any link"><img src="any image" alt="any name"></a>
</div>