保持div的宽度固定，但在调整大小时匹配视频元素的高度

Question

我试图将图像放在视频的一侧，并保持两个元素的高度相同。我想使用div而不是表，但我无法弄清楚如何做到这一点。右侧的刻度具有固定的宽度。

HTML

<div>
    <table>
        <tr>
            <td>
                <video autoplay loop>
                    <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg">
                </video>
            </td>
            <td id="scale"></td>
        </tr>
    </table>
</div>

CSS

video {
    width:100%;
    max-width:600px;
    display:block;
}

#scale {
    width:16px;
    background-image:url("http://i.imgur.com/vroHDK8.png");
}

jsFiddle

Answer 1

您可以使用右侧的padding和位于absolute的{​​{1}}

来复制同样的效果

HTML

div

CSS：

<div id="video">
    <video autoplay loop>
                <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" />
    </video>
    <div id="scale"></div>
</div>

见这里：

http://jsfiddle.net/Lb6Gd/6/