How to use top in the style of images with relative width?

Navigation
2

I have the following code: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {position: absolute; height: auto; }
        </style>
    </head>
    <body>
        <div style="width: 100%; position: absolute; top:0px; left:0px;">
            <img style="width: 100%; top: 0px; left: 0px;" src="dad.png" />
            <img style="width: 28%; top: 3%; left: 38%;" src="img1.png" />
            <img style="width: 28%; top: 29%; left: 38%;" src="img2.png" />
            <img style="width: 28%; top: 55%; left: 38%;" src="img3.png" />
            <img style="width: 28%; top: 3%; left: 69%;" src="img4.png" />
            <img style="width: 28%; top: 29%; left: 69%;" src="img5.png" />
            <img style="width: 28%; top: 55%; left: 69%;" src="img6.png" />

            <!-- Mais código vai ser adicionado à DIV -->
        </div>
    </body>
</html>

Here I have a "bigger" image in the source of the document and "on" this image I place another 6 smaller images. However the larger image should have the same width of the browser (relative), and not lose the proportion, hence: unknown height (automatic).

Problem: because the height is unknown; and it is impossible to nest the images,% relative% property (%) is not applied to other images.

Note: property top relative (%) works normally because the size of left parent is recognized.

Does anyone know of any way to achieve this relative positioning?

    
asked by anonymous 23.10.2014 / 19:54

1 answer

2

The problem is that everything has an absolute position. In this case, the height of the images does not influence the height of the external div. Therefore the external div has zero height, and any percentage of zero is also zero.

I suggest leaving the larger image without position: absolute , and apply this only to others, using a class ( child , in the example below): 

img.child {position: absolute; }
<div style="width: 100%; position: relative; top:0px; left:0px;">
    <img style="width: 100%; top: 0px; left: 0px;" src="http://static.jsbin.com/images/dave.min.svg"><imgclass="child" style="width: 28%; top: 3%; left: 38%;" src="http://static.jsbin.com/images/dave.min.svg"><imgclass="child" style="width: 28%; top: 29%; left: 38%;" src="http://static.jsbin.com/images/dave.min.svg"><imgclass="child" style="width: 28%; top: 55%; left: 38%;" src="http://static.jsbin.com/images/dave.min.svg"><imgclass="child" style="width: 28%; top: 3%; left: 69%;" src="http://static.jsbin.com/images/dave.min.svg"><imgclass="child" style="width: 28%; top: 29%; left: 69%;" src="http://static.jsbin.com/images/dave.min.svg"><imgclass="child" style="width: 28%; top: 55%; left: 69%;" src="http://static.jsbin.com/images/dave.min.svg">
</div>
    
23.10.2014 / 20:51
What is the best way to make an AJAX request in WordPress? Magnifying glass for keyboard cursor zoom