Question

一直试图让这些规模扩大，他们需要保持同一条线然后扩展。我得到了页面上的顶部图像以及其他所有要缩放的图像而不是这些图像。非常感谢任何帮助，提前谢谢。

<div id="bannerImage">
   <div id="bannerImage1"><img src="../Assets/Pictures/Golden Wand/CutOut/Tools.png" width="auto" height="200px" alt="Tools"></div>
   <div id="bannerImage2"><img src="../Assets/Pictures/Golden Wand/CutOut/Angled Truck.png" width="auto" height="200px" alt="Truck"></div>
</div>

CSS Style Sheet

div#bannerImage {border:solid purple;
    width:100%;
    height:222px;
    display:table;
}

div#bannerImage1 {border:solid red;
    position:relative;
    float:left;
    margin-top:7px;
    margin-left:130px;
    max-height:200px;
    max-width:40%;
    display:table-cell;
}
#bannerImage1 img{
    position:relative;
    max-width:auto;
    max-height:100%;
}
div#bannerImage2 {border:solid blue;
    position:relative;
    float:left;
    margin-top:7px;
    margin-left:150px;
    max-height:200px;
    max-width:50%;
    display:table-cell;
}
#bannerImage2 img{
    position:relative;
    max-width:auto;
    max-height:100%;
}

Answer 1

我最终在StackOverflow找到答案，这是Omega的答案，他们使用jsfiddle.net提供了一个例子

缩小页面缩小时div内的图像

1 个答案: