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

I'm after some help please. I'm trying to allow a block of 3 images to scale / resize as the browser window is re-sized, whist staying aligned.

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

I created a JSFiddle to show the initial layout of how images will be placed here: http://jsfiddle.net/headshot_harry/3eEDH/2/

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

The code I have which contains the images is here:

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

<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>

Basically, it scales reasonably well, but I can't figure out how to get it to stay aligned. I think I've got way ahead of myself and got totally mixed up on the percentages.

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

As the JSFiddle above shows, I need to have one image on the left hand side of the block and 2 images sitting on top of each other occupying the right hand side of the block ideally with a small 3/4/5 pixel (whatever works) gap in-between images. Then when the browser is shrunk or enlarged I'd like the images to also shrink or enlarge.

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

Would anyone be able to help me with this please?

有人能帮我这个吗?

2 个解决方案

#1

You will need to make sure your site is responsive. In order to make the changes to the img as the site re-sizes. You will need to make your img size into percents. Check out the example. http://designsbycamaron.net/equal-image-heightswidth/ Here is a direct link to my jsfiddle.

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

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

#2

You will probably want to set your elements' width to a relative value (percent for example), like this:

您可能希望将元素的宽度设置为相对值(例如百分比),如下所示:

    <div style="display: inline-block; width: 50%; background-color: blue; height: 200px;
            vertical-align: top;">test left</div>
    <div style="display: inline-block; width: 40%; ">
        <div style="background-color: red; height: 99px; margin-bottom: 2px;">test right top</div>
        <div style="background-color: red; height: 99px;">test right bottom</div>
    </div>

This way you can always resize and the element will resize to that percentage of the parent-element (sometimes you will need to set the position of the parent to relative though).

这样你就可以随时调整大小,元素将调整为父元素的百分比(有时你需要将父元素的位置设置为相对)。

I updated your Fiddle: http://jsfiddle.net/3eEDH/1/

我更新了你的小提琴:http://jsfiddle.net/3eEDH/1/

#1

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

#2