html - 保持 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 定位 div 来复制相同的效果

HTML

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

CSS:

video {
    width:100%;
    max-width:600px;
    display:block;
}
#video{
    position:relative;
    padding-right:16px;
    display:inline-block; /* if you would like this to remain a block element you could impose the same max-width (+ 16px) as you're doing on the video element */
}
#scale {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:16px;
    background-image:url("http://i.imgur.com/vroHDK8.png");
    background-size: contain;
}

看这里:

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