相对于包含div的img宽度

Question

原始问题

计算图像宽度相对于它在css中包含div的最有效方法是什么？

我有以下代码段设置#image1.width为相对于其父级宽度的百分比.我正在使用百分比,因为我需要在调整屏幕大小时按比例缩放图像.

div {
  position: relative;
  display: block;
  width: 100%;
}

#image1 {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 29.43%;
  height: auto;
}

#under {
  width: 100%;
}

<div>
  <img id="image1" src="http://placehold.it/206x115">
  <img id="under" src="http://placehold.it/700x300/ff00f0/ffffff">
</div>

它目前正在按预期工作,除了我必须手动计算每个图像的宽度百分比.即

#image1 dimensions == 206x115
#under dimensions == 700x300
new #image1.width % == #image1.width / #under.width == 206/700 == ~29.43%

我想知道的是,如果有一种calc()方法或类似方法可以实现以简化/简化此过程？

我打算使用,width: calc(100% / 700)但是当屏幕尺寸发生变化时,这显然不起作用.

---

目标

要重新迭代,#under图像必须与屏幕尺寸和#image保持比例一致.

我希望彼此保留自然图像比率(即,在所有浏览器宽度下,图像的大小是另一个的四分之一).

注:该html可以以任何方式进行重新配置,以实现这一目标.

目标浏览器: Chrome,Firefox,Edge.

---

邮政赏金评论

评论@Obsidian Age的答案(第一笔赏金结束31.03.17):

不幸的是@Obsidian Age的答案是不正确的 - 它很接近但并不完全,我只想在这里澄清一下......下面是他回答的片段......请注意,我认为这是一个很好的答案,只是澄清为什么它尚未被接受:

:root {
  --width: 90vw; // Must be viewport-driven
}

#image1 {
  width: calc(var(--width) / 3); // The 3 can be replaced with any float
}

设置--width: 90vw如果body或div有一max-width组会发生什么？在考虑因素时,这对于所有设备来说也很难计算viewport-scaling.

#image1 { width:calc(var(--width) / 3); }这相当于calc(90vw / 3)哪个30vw等于30%的图像宽度.但是我们如何计算出除以的数字呢？好吧,它又回到了我们开始的地方...... width:calc(var(--width) * calc(206/700*100));这就是为什么我没有接受这个答案.

Answer 1

不幸的是,CSS没有父选择器.虽然你不能直接用CSS 创建一个相对于父元素的元素,但是你可以用纯CSS做的设置一个两个元素都使用的变量:

:root {
--width: 90vw; // Must be viewport-driven
}

现在可以使用该变量作为父元素的两个(固定)的宽度,和儿童的计算驱动宽度:

#under {
  width: var(--width);
}

#image1 {
  width: calc(var(--width) / 3); // The 3 can be replaced with any float
}

请注意,变量必须是固定单位,或者相对于视口.如果它是基于百分比,两者#under并#image1会根据他们的宽度过各自的父母.为了响应这项工作,它必须基于视口.

:root {
--width: 90vw;
}

div {
  position: relative;
  display: block;
  width: 100%;
}

#image1 {
  position: absolute;
  left: 10%;
  top: 10%;
  width: calc(var(--width) / 3);
  height: auto;
}

#image2 {
  position: absolute;
  left: 25%;
  top: 10%;
  width: 10%;
  height: auto;
}

#under {
  width: var(--width);
}

<div>
  <img id="image1" src="http://placehold.it/206x115">
  <img id="under" src="http://placehold.it/700x300/ff00f0/ffffff">
</div>

我还在这里创建了一个JSFiddle ,在视口大小调整时你可以看到这两个元素的比例.

希望这可以帮助!:)

Answer 2

我意识到这个问题提示了一个纯CSS解决方案,但我自由地将其解释为"没有JavaScript".

在这方面,这是使用嵌入式SVG的解决方案:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" viewBox="0 0 700 300">
     
  <image x="0" y="0"
      xlink:href="http://placehold.it/700x300/ff00f0/ffffff"/>
  <image x="10%" y="10%"
      xlink:href="http://placehold.it/206x115"/>
</svg>

Answer 3

我认为最好的方法是消除宽度和使用比例来适应div,但问题是比例变换不接受任何单位值,例如%或px或vw/vh!

.common_img_class{
    transform: scale(calc(100vw/700)); /* this won't work! */
    /* Idea here is to let image take is original width & then scale with respact to base image scaling. Base image scaling is detenined by *window_width/base_image _width*, here base image width is 700 as per you example */
}

因此,我能想到的第二个最好是消除手动计算百分比.使用calc()功能为您完成此操作.

#firsrt_img{
    width: calc((206/700) * 100%);
}
#second_img{
    width: calc((306/700) * 100%);
}

在这里你仍然必须为所有人写宽度,但至少不计算百分比或比率计算.

注意:
如果有人可以帮助第一种方法,欢迎他们的意见.