CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
McCuz
McCuz

Reputation: 227

Table or Div height and width adjusted to background image size

I use a huge image as a background for my div. This image needs to be only shown once, maximum size that the container allows while keeping aspect ratio. Image can have any aspect ratio. The size of container is resizable and can also have any aspect ratio. I managed to achieve that with

background-size:contain;
background-repeat:no-repeat;
background-position: center center;
width:100%;
height:100%;
background-image: url("path/to/img");

"Over" that image I need an 8x8 table layout that gets bigger and smaller together with background image.

In my jsfiddle example you have the correctly working image (try resizing output window), but I have no idea how to make my table always be directly scaled over that image (Idea is that field A1 will always mark the exact same spot on a specific image, no matter the size, image aspect ratio, container aspect ratio, ...)

https://jsfiddle.net/15uovq7L/4/

If there's no CSS/HTML option for this problem, a jQuery/JavaScript solution is applicable.

Upvotes: 1

Views: 166

Answers (1)

Arsen Babajanyan
Arsen Babajanyan

Reputation: 123

https://jsfiddle.net/15uovq7L/5/

set padding-top: 46%; in .tlorisOgledNacrta.

46% is a image height * 100 / image width

Upvotes: 1

Related Questions