在浏览器窗口调整大小时,在HTML CSS块中自动调整图像大小

Question

我请一些帮助.我正在尝试允许一块3个图像缩放/调整大小,因为浏览器窗口被重新调整大小,保持对齐.

我创建了一个JSFiddle来显示图像将如何放置在这里的初始布局:http://jsfiddle.net/headshot_harry/3eEDH/2/

我包含图像的代码在这里:

<div style="width: 100%; margin: 0 auto -80px auto;">
    <div style="display: inline-block; border: 1px solid black; padding: 3px; text-align: center;">
        <div style="display: inline-block; margin: 0 4px 0 0; padding: 0; background-color: White; border: 1px solid black;
            width: 51%; vertical-align: top;">
            <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove2.png" style="width: 100%;" />
        </div><div style="display: inline-block; margin: 0; margin: 0; width: 26%;">
            <div style="border: 1px solid black; margin-bottom: 3px;">
                <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove4.png" style="width: 100%; background-color: White; margin-bottom: 4px;" />
            </div>
            <div style="border: 1px solid black;">
                <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove4.png" style="width: 100%; background-color: White;" />
            </div>
        </div>
    </div>
</div>

基本上,它可以很好地扩展,但我无法弄清楚如何让它保持一致.我想我已经超越了自己,并且在百分比方面完全混淆了.

正如上面的JSFiddle所示,我需要在块的左侧有一个图像,并且两个图像位于彼此的顶部,占据块的右侧,理想情况下具有小的3/4/5像素(无论什么工作) )图像之间的间隙.然后当浏览器缩小或放大时,我希望图像也缩小或放大.

有人能帮我这个吗？

Answer 1

您需要确保您的网站具有响应能力.为了对网站重新调整大小的img进行更改.您需要将img大小设为百分比.看看这个例子.http://designsbycamaron.net/equal-image-heightswidth/ 这是我的jsfiddle的直接链接.

img {
   width: 80%;
   height: auto;
 }