-1

所以我需要这个图像的比例可以说是 100vh 上的 2880x1520。

我可以使用 object-fit:cover; 对象位置：左中；

它工作正常。

问题是我还必须在图像的特定部分放置按钮，并且图像当然会根据浏览器的比例调整大小。

因此，我很难弄清楚按钮遵循 object-fit:cover 所暗示的图像大小调整的规则是什么，因此按钮将始终位于该特定图像部分的顶部并遵循图像调整大小.

它可能是 vh 和 vw 的组合，但我无法真正弄清楚这里的确切规则是什么。

提前感谢您的想法！

4

2 回答 2

1

为此，您还需要添加一些 javascript 来计算容器的纵横比是否比图像的纵横比更宽或更窄。

window.addEventListener("resize", moveButtons);

imageRatio = 2880/1520;
let container = document.getElementById("container");
let  button1 = document.getElementById("button1");

function moveButtons() {
  containerRatio = container.clientWidth / container.clientHeight;

  if (imageRatio <= containerRatio) {
    // the container is wider than the image - top and bottom are cut off
    button1.style.height = (staticHeight * imageRatio / containerRatio)+ "vh";
  } else {
    // the container is narrower than the image - left and right sides are cut off
    button1.style.left = (staticWidth * imageRatio / containerRatio)+ "vw";
  }
}

这是假设图像居中并且按钮的位置设置为绝对。它可能需要一些微调，并且可能需要在方程式或开关比率中添加按钮的尺寸，但基本上就是这样。

祝你好运，让我们知道进展如何！

于 2021-06-09T09:12:52.663 回答
0

我不会这样做，而是将图像设置为 div 的背景，然后使用 flexbox 来定位按钮。

HTML

<section class="main">
<button>Random button</button>
</section>

CSS

.main
{
width: 100vw;
height: 100vh;
background: url("https://res.surplex.com/images/c_fit,d_no_image.png,f_auto,fl_progressive,h_1920,q_auto,w_1920/i_05015637/AINGERSOLL_RAND_Kompresszor.jpg");
display: flex;
justify-content: center;
align-items: center;
}

您想要使用的方法也可以像这样。将位置绝对设置为图像和按钮，然后使用 flexbox 将按钮定位到中间。

HTML

<section class="main">
   <img src="https://res.surplex.com/images/c_fit,d_no_image.png,f_auto,fl_progressive,h_1920,q_auto,w_1920/i_05015637/AINGERSOLL_RAND_Kompresszor.jpg" alt="">
<button>Random button</button>
</section>

CSS

.main
{
width: 100vw;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

button
{
position: absolute;
 display: flex
}

img
{
width: 100%;
 height: 100%;
 position: absolute;
 object-fit: cover;
 }

如果您不希望按钮位于中间，这在您的帖子中不太清楚，您可以使用不同的 flex 对齐选项，然后离开：vw; （视口宽度）或顶部：vh；(viewport-height) 以进一步对齐您的按钮。

于 2021-06-09T08:47:06.027 回答