keygift.blogg.se

• Stick a div to fluid image how to#

Other solution, demoed in this fiddle :, as suggested by MilanSxD, to use inline-block elements.

Stick a div to fluid image how to#

One solution would be to add a wrapping div element with correct aspect ratio, then both image and overlay could be inner elements with absolute full width and height, however, I don't know how to do that in a way that this div would be fully fluid in the container div image), so the red dot does not stick to its position relatively to the image.Īny idea how to achieve this without javascript ? Stick the navbar to the top of the window by using fixed top-0 right-0.

Problem is : The overlay has the wrong dimensions (. Use responsive jumbotron component with helper examples for background image. This can be really useful if you want to stick an element thats.

position.

To be overlayed with same-size div element.

Whereas if you set the overflow value to hidden. That image will stick out of the div and be visible by default.

To cover maximum space of container, while fully visible and maintaining aspect ratio Get started with 200 in free credit The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you’ve explicitly set to be 200px wide, but contains an image that is 300px wide.