Shrink container to image width - html

Question

I am currently developing a website where the user should be able to scroll horizontally through a landscape with clickable info points on it.
The webite is required to be fully responsive and to ensure this I want to put my landscape image and the info points in a container with the exact equal size of the image.
HTML:
<div id="container-main">
<div id="landscape">
<img class="background" src="image.jpg" />
<div class="point" style="top: 24%; left: 7.5%;"></div>
<div class="point" style="top: 29%; left: 17.7%;"></div>
<div class="point" style="top: 77%; left: 39%;"></div>
<div class="point" style="top: 26%; left: 68%;"></div>
<div class="point" style="top: 70%; left: 80%;"></div>
</div>
</div>
CSS:
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
height: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
My CSS works completetly fine until you resize the height of the browser window, then the info points move to wrong places.. however when you refresh the resized website it is working properly again.
Try it: Fiddle (resize the output and then click "run" again.)
In my real project I am setting the container's width to the image's width using javascript but I would love to have a clean CSS solution.
I know there are similar questions around but none of the suggested solutions works out for me.
Thank you in advance!

Answer 1

use vw insted of %
Adjust the code below:
<div id="container-main">
<div id="landscape">
<img class="background" src="image.jpg" />
<div class="point" style="top: 24vw; left: 7.5vw;"></div>
<div class="point" style="top: 29vw; left: 17.7vw;"></div>
<div class="point" style="top: 77vw; left: 39vw;"></div>
<div class="point" style="top: 26vw; left: 68vw;"></div>
<div class="point" style="top: 70vw; left: 80vw;"></div>
</div>
</div>
<style>
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
height: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
</style>
.....................Another solution.........................................................
change css:
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
width: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
NB: See the responsive coding standard of this site:

Answer 2

First off, never use position:fixed; on css unless you want the div or container to stay at the same place even when you scroll.
Second, i would recommend to use jquery to make a fluid layout. What a fluid layout does is, it keeps the content of the page in the same place even when you resize the website. If you dont want to waste time on writing a long script file, i would personally recommend you to use Dreamweaver. Dreamweaver updated their scripts to give the users easy way to make a fluid layout just by clicking some buttons. It will auto generate the script file and css for you. And if you're a manual coder like myself, than simply use dreamweaver to generate a fluid layout and start coding manually.
Hope this helps :)