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

Question

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

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

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

我准备了一个（清理过的）fiddlehere。根据我目前的发现，有两个相反的 CSS 规则：

宽度是动态的，但width/height比例必须相等。我通过添加受 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。

如何调整我的代码，这样

select 元素与图像中的 select 元素重叠，并且
每当调整容器大小时，select 元素也会调整大小？

我希望这个解决方案只有 HTML & CSS，尽管 javascript 是可以接受的。

Answer 1

这似乎是一种非常不寻常且笨拙的处理方式。就我个人而言，我会将图像分成三部分以显示 1、2 或 3。然后我将使用三个单独的布局元素来控制选择框，单独的 div 或 table 行。每个布局元素都将包含一个图像和一个选择框。

Answer 2

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

根据你住的地方和你的客户是谁，你至少违反了联合国关于残疾人权利的条约。我知道美国和加拿大已经批准并颁布为法律，大多数欧盟国家也是如此。

但是，有一种更简单的方法可以做到这一点，而且更加合规。

<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-only，但为了速度，我会使用 SVG 图像作为箭头位，并为旧浏览器提供 PNG 回退。

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

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

Placing HTML elements on an image with dynamic size

html

css

scaling

image

responsive-design