1

我正在寻求帮助。我正在尝试在重新调整浏览器窗口大小时允许 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 所示，我需要在块的左侧放置一个图像，并且在块的右侧放置 2 个图像，理想情况下占用一个小的 3/4/5 像素（无论什么工作) 图像之间的间隙。然后，当浏览器缩小或放大时，我希望图像也缩小或放大。

有人能帮我解决这个问题吗？

4

2 回答 2

5

您需要确保您的网站是响应式的。为了在站点重新调整大小时对 img 进行更改。您需要将您的 img 大小设置为百分比。查看示例。http://designsbycamaron.net/equal-image-heightswidth/ 这是我的jsfiddle的直接链接。

img {
   width: 80%;
   height: auto;
 }
于 2013-06-05T16:22:52.500 回答
0

您可能希望将元素的宽度设置为相对值（例如百分比），如下所示：

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

这样，您始终可以调整大小，并且元素将调整为父元素的该百分比（有时您需要将父元素的位置设置为相对）。

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

于 2013-06-05T16:27:38.343 回答