How to use top in image style with relative width?

Asked

Viewed 129 times

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 "larger" image at the origin of the document and "on" this image I position 6 other smaller images. But the larger image should have the same browser width (relative), and not lose the ratio, so: unknown height (automatic).

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

Observing: the property left relative (%) works normally because the size of the divfather is recognized.

Does anyone know in any way to carry out such a relative positioning?

html5 css3

1 answer

2


The problem is that everything has absolute position. In this case, the height of the images does not influence the height of the external div. So 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">
    <img class="child" style="width: 28%; top: 3%; left: 38%;" src="http://static.jsbin.com/images/dave.min.svg">
    <img class="child" style="width: 28%; top: 29%; left: 38%;" src="http://static.jsbin.com/images/dave.min.svg">
    <img class="child" style="width: 28%; top: 55%; left: 38%;" src="http://static.jsbin.com/images/dave.min.svg">
    <img class="child" style="width: 28%; top: 3%; left: 69%;" src="http://static.jsbin.com/images/dave.min.svg">
    <img class="child" style="width: 28%; top: 29%; left: 69%;" src="http://static.jsbin.com/images/dave.min.svg">
    <img class="child" style="width: 28%; top: 55%; left: 69%;" src="http://static.jsbin.com/images/dave.min.svg">
</div>

  • Add a position: relative in the style of div otherwise it doesn’t work. At least it didn’t work here.

  • How so? I kept the position: Absolute of your example and it worked (click "run code snippet" above).

  • Try for more content on the page.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.