We Keep Coding

Two images on each other with responsive behavior and proportional scaling

I would like to do something pretty standard in HTML/CSS/javascript I think but somehow I didn't find any solution for now: I want to have multiple images on each other with some of them being clickable. For example:
submarine with red circle button as window in this case the submarine is one img and the red circle is an input type="image" working as a button.
I want those multiple images to behave "as one" in term of responsivness and scaling so that I still see the same overall image independantly of the size of my window.
If I use this trick here: How do I position one image on top of another in HTML? and make both images responsive then the circle is not scaling down simultanuously with the submarine. Moreover, since the red circle is positioned in an absolute way it is not staying at the same place relative to the submarine.
here is my current code:
.div{
position: relative;
}
.responsive {
max-width: 100%;
}
#test2 {
width: 12.3%;
position:absolute;
z-index: 2;
left: 73%;
top: 62%;
}
#test
{
width: 100%;
position:relative;
z-index: 1;
}
<div>
<img src="/submarine.png" id="test" class="responsive" />
<input type="image" src="/red_circle.png" id="test2" class="responsive" />
</div>

In order to achive that, you can work with percentages, so if you reduce the scale of the window the size of the images reduce as well.
CSS:
.submarine {
width: 30%;
height: 55%;
position: relative;
}
.redDot {
width: 2%;
position: absolute;
}
HTML:
<div>
<img src="submarine.jpg" clas="submarine">
<img src="redDot.png" class="redDot">
</div>
Then play with the margins in orther to position the red dot in the submarine.

Dimensions and positions in percentages relate to the dimensions of the parent element. In your case the window of the submarine should be positioned as a percentage of the submarines dimensions. What you should do to make this is work is to put the window as a child in the submarine. Easiest would be to work with divs with background-images and use background-size: 100% to make the background-images scale with the elements.
Also you could use the "padding-bottom trick" to set the "height" of the div to a percentage of the parent's width.
#submarine {
background: yellow;
width: 30%;
padding-bottom: 20%;
position: absolute;
left: 20%;
top: 20%;
}
#window{
position: absolute;
background: red;
width: 20%;
padding-bottom: 20%;
right: 5%;
top: 40%;
background: red;
}
<div id="submarine">
<div id="window"></div>
</div>

Make an image with a percentage width a perfect square using css

Hello I have an image in a container that is set to width: 100%.
I was wondering if there's any way to can have a height generated to make it a perfect square.
So say the original image is 450px wide and 300px tall.
The css gives it a width of 100% so it stretches and fills the container, but the image remains rectangular.
Is it possible to do some css or jquery trick to generate a height to make this image a perfect suqare?
I don't care if the image gets cropped or stretched out and looks funky, I just need it to be a perfect square.
Thanks!

So you are free to stretching out the image - this can be a CSS solution:
Make a square container based on the width by using padding-top: 100%
Position the image absolutely by stretching it out to the square container as desired.
See demo below:
.wrapper {
border: 1px solid red;
height: 0;
overflow: hidden;
padding-top: 100%;
box-sizing: border-box;
position: relative;
}
.wrapper img {
width: 100%;
vertical-align: top;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/400x300" />
</div>

Using straight CSS you can set width and height to 100vw.

You could do so with the following jQuery
var img_width = $('#image').width();
$('#image').css({'height':img_width+'px'});
Hope that helps.

Since you don't care if the image is cropped or distorted, the layout is simple.
Just add overflow: hidden to the container. The image can be any size.
div {
height: 100px;
width: 100px;
border: 2px solid red;
overflow: hidden;
}
<div>
<img src="http://www.placekitten.com/450/300">
</div>

Calculate apsect ratio width based on height

I have an inline img that is 1280(w) x 1024(h) and is contained within a div. The divs dimensions are set 100%(w/h) of the viewport with overflow hidden.
I want to use the image as a fullscreen background and require that it fills the viewport completely regardless of dimensions with no borders showing. It must keep its aspect ratio and I would also like the image to be centered at all times. I am aware that to achieve this some of the image will be cropped.
I believe if make the image height match the viewport height and calculate the width based on the images aspect ratio this will work but I am unsure how to do this. Can anyone help?
Many thanks in advance.

Use backstretch http://srobbin.com/jquery-plugins/backstretch/
$("#demo").backstretch("http://urltoimage.jpg");'
set #demo to 100/100% width and height

If you're not 100% glued to using an img tag, you can do the following:
HTML
<div id="background"></div>
CSS
#background {
background: url('path/to/img.jpg');
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
}

Not really an answer to your question but a potential alternative -- have you tried the min-height/min-width CSS properties?
HTML:
<div class="container">
<div class="image-wrapper">
<img src="..." />
</div>
</div>
CSS:
.container {
width: 100vw;
height: 100vh;
background-color: grey;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
Fiddle: https://jsfiddle.net/mkjoyep1/
In the example, .container (your full width/height div), fills the page width vw/wh and the .image-wrapper has its width/height set to 100% which will match the parent's width and height. With overflow: hidden acting as the crop mechanism you can then stretch your image to fill it's container. I've positioned the image in the center with the method explored here.
This appears to work for me on Chrome and Firefox.
*Edited to include html/css

Make top image stay in position when main image resizes

I have a main image and little callout buttons on top of the main image. I'm trying to get the callout buttons to stay in position when the screen size changes while the main image size resizes with max-width and background-size: contain, but right now, the callout button's position changes.
Here is the CSS:
.main_image
{
background: red;
height: 400px;
background-size: contain;
position: relative;
max-width: 100%;
}
.callouts
{
background-image: url(http://www.autotintspecialist.com/zoomButton_moused.png);
height: 70px;
width: 40px;
height: 30px;
position: absolute;
top: 70px;
right: 180px;
}
Here is the HTML:
<div>
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
</div>
<div class="callouts"></div>
Here is the link to the fiddle: http://jsfiddle.net/Nem2C/
As you resize the image, the callout button changes position, but I need it to stay where it's at when the image resizes.
is there a jquery solution or a javascript solution to this as well?

I tried to fix this. I didn’t finish, but I got closer to the solution.
See this jsFiddle. I put div.callouts inside the div with the image and positioned it relative to that with percentage values.
<div class="image_wrapper">
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
<div class="callouts"></div>
</div>
.image_wrapper {
position: relative;
}
.callouts{
top: 15.5%;
right: 24.1%;
}
To calculate the correct percentage value from, for example, the top, use the formula (image_height_in_pixels / pixels_from_the_top) * 100.
The problem with what I have now is that the callout x-position doesn’t scale with the width properly for some reason.

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/

To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?

If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO

try ..
$backWidth=$(window).width();
$backHeight=$(window).height();

As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>