相对于包含div的img宽度

问题描述 投票：31回答：5

原始问题

计算图像宽度相对于它在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));这就是为什么我没有接受这个答案。

html css
5个回答
11
投票

不幸的是，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>

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

希望这可以帮助！ :)

6
投票

我意识到这个问题提示了一个纯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>
5
投票

我认为最好的方法是消除宽度和使用比例来适应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%);
}

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

注意： 如果有人可以帮助第一种方法，欢迎他们的意见。

2
投票

如果你愿意使用bootstrap（https://getbootstrap.com/examples/grid/），那么可能有用的一件事：

<!-- parent -->
<div class="row">
  <div class="col-md-6">
    <img src="">
    <!-- this is 50% of the screen for min 992px, a full line otherwise -->
  </div>
  <div class="col-md-3">
    <img src="">
    <!-- this is 25% of the screen for min 992px, a full line otherwise-->
  </div>

  <div class=col-md-3>
    <img src="">
    <!-- this is 25% of the screen for min 992px, a full line otherwise -->
  </div>
</div>

您可以根据需要对这些进行分组，只需记住数字必须添加到12（在我的示例中，6 + 3 + 3）。使用col-md-12可以实现100％宽度效果。此外，md中缀只是将所有内容放在同一行和堆叠元素之间的几个截断选项之一。您可以查看http://getbootstrap.com/css/#grid了解更多详情，以及几个例子。

1
投票

受answer的Robby Cornelissen的启发，这是一种目前适用于目标浏览器的方法。它唯一的缺点是必须在HTML中明确指出图像的尺寸（实际上，SVG）。

这是一个demo。

<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" width="700" height="300"
      xlink:href="http://placehold.it/700x300/ff00f0/ffffff"/>
  <image x="10%" y="10%" width="206" height="115"
      xlink:href="http://placehold.it/206x115"/>
</svg>

像Robby的回答一样，这种方法使用了SVG image element。当没有明确指定维度时，currently默认为零宽度和高度，但SVG 2中的will change。这意味着只要浏览器支持SVG 2，我们就可以设置width="auto" height="auto"而不是指定图像尺寸。

根据CSS width，height和‘image’在default sizing algorithm元素上的值auto是根据参考图像的内在尺寸和纵横比计算得出的。 - SVG 2 Editor's Draft, § 7.8. Sizing properties: the effect of the ‘width’ and ‘height’ properties.访问2017-12-18。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.