Question

我正在寻找（仅限CSS）解决方案，根据图像尺寸的百分比值，而不是元素的尺寸来定位图像（background-image上的<div>）。 / p>

例如，如果我使用以下内容：background-position: 50% 50%这会将图像置于<div>的中心位置，但我真正想要的是x和x的图像的50％标记y轴（图像的中间）分别位于<div>的左侧和顶部。在执行background-position: 0% 0%时，这会按预期工作，因为这会使图像的左侧与<div>的左侧（以及<div>顶部的图像顶部对齐）。但正如详细here所示，在解释background-position的这些百分比值时似乎会进行一些有趣的计算。

以下是一些例子：

不是我想要的： https://jsfiddle.net/j4etsg8w/

我想要的结果（但应使用百分比而不是绝对像素值）： https://jsfiddle.net/qgp4sfdm/

这只是一个例子，我使用的图像与<div>的比例并不总是1：1。例如，对于2000x1000图像，它应该是这样的：https://jsfiddle.net/uxvjgtra/

我知道我可以使用JS通过请求图像的实际大小来做到这一点，然后弄清楚它是如何缩放以适应<div>然后相应地手动定位 - 但问题是我希望能够在图像加载之前应用此转换（以避免在页面加载时出现刺耳的图像变换），并且我无法访问实际的图像尺寸，直到图像为止加载...这就是我想使用CSS的原因。

关于如何实现这一点的任何想法？也许是CSS calc()的一些技巧？

Answer 1

如果我理解了最终目标，你可以将背景应用于父元素的伪元素，使伪元素与父元素的大小匹配，然后使用u, a = session.query(User, Address).\ filter(User.id==Address.user_id).\ filter(Address.email_address=='jack@google.com').\ first():将其向上/向左移动50％它自己的宽度/高度。

＆＃13;

translate()

＆＃13;

.myImage {  
  width: 500px;
  height: 500px;
  position: relative;
}
.myImage::before {
  content: '';
  background: url(http://via.placeholder.com/1000x1000) 0 0 no-repeat / cover;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
body {
  background-color: #fff;
}

＆＃13;

根据图像的百分比定位背景图像

1 个答案: