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

Question

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

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

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

我准备了一个(干净的) fiddle 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。因此，这些现在都计算为 0 像素。

我怎样才能调整我的代码，这样

1. 选择元素与图像中的选择元素重叠，并且
2. 容器大小改变时选择元素的大小也会改变？

虽然 javascript 是可以接受的，但我更希望此解决方案仅包含 HTML 和 CSS。

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。祝你好运，玩得开心。