将HTML元素放在具有动态大小的图像上

Question

设计师使用三个选择框为我们创建了一个图像。我添加了HTML元素和CSS，这样就会出现三个选择框，并且会与图像上的框重叠。这些是使用像素值定位的。

设计师的形象对于移动设备来说太大了，所以我创建了一个较小的版本。图像如下：

如果用户的设备宽度低于某个阈值，则页面会加载此图像并将其置于中间位置。如果设备宽度小于图像，则图像应缩放以适合，并且选择框也应缩放以与图像重叠。我在最后一部分遇到了麻烦。

我准备了一个（清洁的）小提琴here。根据我到目前为止的调查结果，有两个相反的CSS规则：

• 宽度是动态的，但宽度/高度比例必须相等。我通过添加受this answer启发的以下代码解决了这个问题：

  #container {
      width: 100%;
      max-width: 458px;
      margin: auto;
  }
  
  #banner {
      height: 0px;
      padding-bottom: calc(100% * 350 / 458);
      background-image: url('https://s29.postimg.org/f5xjgn53b/selector_header_small_anonymous.png');
      background-size: 100% 100%;
  }
  

• 我目前已将各种元素的高度和顶部设置为百分比。要使这些值相对于宽度，还应设置其父项的高度。但是，由于第一个解决方案，＃banner元素的高度为0px。因此，现在这些都评估为0px。

如何调整我的代码，例如

1. 选择元素与图像中的选择元素重叠，
2. 每当调整容器大小时，都会调整select元素的大小？

我希望这个解决方案是HTML＆amp;仅限CSS，但javascript是可以接受的。

Answer 1

你正在尝试做一些本质上不可能的事情。我能想到的无数用例会破坏你的设计。在许多层面上，这也是不好的做法和糟糕的可访问性。

根据您居住的地点和客户的身份，您至少违反了联合国残疾人权利条约。我知道美国和加拿大已经批准并制定成为法律，就像大多数欧盟一样。

然而，有一种更简单的方法可以做到这一点，也更加符合要求。

<div id="container">
<fieldset id="banner">
<ol>
    <li>
    <legend>A descriptive legend (accessibility requirement)</legend>
    <label for="first">A descriptive label (accessibility requirement)</label>
    <select class="selector" id="first" name="first">
        <option value="-1">Selector</option>
    </select>
    </li>
<!--- rinse and repeat --->    
</ol>
</fieldset>
</div>

您是一个项目列表，因此ol在语义上是合适的。它还为辅助技术用户提供了更好的导航。

现在，为了获得您想要的外观，请按照此处所述设置列表编号的样式：

http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

用你那里的那个绿色条标记标签的样式。 （注意不要仅使用颜色作为指示器，12个男性中有1个是色盲。）并且只需将您的场景设置为灰色背景。

我可以想办法只使用这个CSS，但是为了速度，我会使用SVG图像作为箭头位，并为旧浏览器使用PNG后备。

HTH。祝你好运，玩得开心。

Answer 2

这似乎是一种非常不寻常和笨拙的事情。我个人将图像拆分为三个以显示1,2或3.然后我将使用三个单独的布局元素来控制选择框，可以是单独的div或表格行。每个布局元素都包含一个图像和一个选择框。