Develop Reference

Image within an Image using HTML, CSS and JavaScript

I created a regular image in HTML. Then, dynamically via JavaScript, I added an image within the initial image. However, I am having an issue where if a user were to zoom in or out, the internal image does not stay in the same place. And it is possible that a user could zoom in my case, anytime, and I really need the internal image not to move. I do not have anything fancy, and I am trying all sorts of ways to get this to work, so if you have a way that uses HTML and CSS, I could add it to my code, because I have tried many different avenues and changed my HTML around multiple times. However, if you would like my code, in depth, I would be glad to supply it with you. Any help is greatly appreciated, or if you simply need more clarification, I can do that as well, thanks in advance.
Here is an example of the code that adds an image to an image, and has the issue that I explained above:
$(document).ready(function() {
$('#myImgId').click(function(e) {
var offX = event.clientX;
var offY = event.clientY;
margin = 20;
if (offX > margin) offX -= margin;
if (offY > margin) offY -= margin;
var signHereImage = document.createElement("img");
signHereImage.setAttribute('src', 'imageInserted.jpg');
signHereImage.setAttribute('class', 'overlays');
signHereImage.style.left = offX + "px";
signHereImage.style.top = offY + "px";
document.body.appendChild(signHereImage);
});
});
<form id="form1" runat="server">
<div>
<img src="page3.jpg" alt="PDF Image" id="myImgId" />
</div>
</form>
This is for the most part what it is, I know that I am doing something incorrectly, I just do not know what for certain, thanks again in advance.

I would use the background-image property to achieve this. You can place the image in a div, give that div a background image, and then position the image relative to the div. Here's a working example:
div {
position: relative;
height: 500px;
background-image: url(https://images.unsplash.com/photo-1413781892741-08a142b23dfe?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=);
background-size: cover;
}
img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 200px;
}
<div>
<img alt="img" src="https://images.unsplash.com/photo-1483086431886-3590a88317fe?dpr=2&auto=format&fit=crop&w=1500&h=2247&q=80&cs=tinysrgb&crop=&bg=" />
</div>

Consider what changes when a user zooms in or out on a web page. The viewport size changes, relative to the content on the page.
You are probably styling the internal image based on something related to the viewport. The automatic width of block elements is calculated from the width of the viewport if other constraints are not available. For example, an element with the following CSS properties moves around with the right edge of the viewport:
position: absolute;
right: 20px;
See a demo.
Other elements, perhaps including the external image of yours, are by default laid out line-by-line, starting from the top left. This discrepancy can cause some elements of the page to move with respect to others when zooming or resizing the window.
Review how you instruct the browser to lay out these two images, and make sure that, if they depend on the size of the viewport, they depend on it in the same way.

Issue with iFrame Element not re-sizing within container

I am working on a small VA project and I am attempting to pull stats from another website. The only way I have been able to find out how to do this, is by using an iFrame with the clip function.
Website is: NWGlobalVA.com
Now the Issue I am having is if you go to the main page and re-size the browser in anyway it pushes behind the map element. I have tried everything in my knowledge and research to make it re-size with the container.
Below is the code I use with the iFrame and CSS to do the clipping. Any help would be much more appreciated then you will understand. I have been trying to do this for a couple days now. Ideally I would rather just get the information once every 15 minutes and pass it to my database. However on the website none of the tables are defined and I would know how to go about that.
<style>
.iframeb {
position: absolute;
left:-384px;
right:0px;
top: -145px;
clip: rect(190px, 625px, 350px, 400px);
}</style>
<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>

The way I deal with iframe size is with javascript (jquery):
I calculated the original iframe aspect ratio by taking the width/height. So in your case: 890/1900.
<script>
function size_iFrame()
{
// If the width and height of the iframe are set
// as attributes (<iframe width='890' height='1900'>),
// you can have the js calculate it for you.
// aspect= $('iframe').attr('width') / $('iframe').attr('height');
aspect= 0.47;
$('iframe').css('width', '100%');
$('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
size_iFrame();
$(window).resize(function()
{
size_iFrame();
});
}
</script>
This will fit the iframe to the width of its container and give it the same aspect ratio as it initially had.
Edit: To answer your question, i'd call it from the ready callback and setup and window resize callback to call every time the screen size changes. I edited my code above to show this.
Edit2: As #mugé points out, you'll also need to remove your iframe css styling for my method to work.

In responsive design, I assign the iframe a container sized inside the CSS. For example,
CSS
.iframe_container {
display: inline;
float: left;
width: 89%; //whatever width you want
}
You will need to eliminate your .iframeb absolute, right, left positionings, because the container will take care of it all, unless you are talking about the 'List' parameters on top of the map, I would try to use #media to arrange clean lists according to screen sizes for the .iframeb class.

jquery show images with same height and width

Hi I am having an problem placing images in a neat manner in my site.
So what I have is: Using ajax I get a bunch of image URLS as JSON.
in Jquery I am looping these and printing them into a div like this:
$('.product').click(function(){
$.post(
"ajax.php",
{
prodId: productId,
action: "getProductImages"
},
function(data)
{
var obj = jQuery.parseJSON(data);
newDiv = "";
jQuery.each(obj, function(key,value)
{
newDiv += '<img src="'+value+'">';
});
$("#prod-images").empty();
$(newDiv).appendTo('#prod-images');
}
);
});
This works fine and shows the product images in a div as I want it to show. The problem is that some images have different height and width and they look awkward and ugly the way they are rendered now. How can I show them in a neat set with same height and width, or atleast same height?
I tried putting it in div tag and span tag, but it totally messes up what I already have. I am not very good with frontend technology so any help is appreciated! Even a library will help me...
Thanks in advance

You can put the height and width attributes in the img element.

Try css with img tag
img
{
height: 150px; //your height
}
This will set the height of the image and scale the image width keeping the ratio.
If you want to apply to some specific image then define that in css to . like for all image in div which class is img-div
.img-div img
{
}

You could attach a CSS class in your img tag.
.media-small {
width: auto
height: 300px; /* or em */
}
To answer your question you could also get tricky with a frame div to maintain the ratio if you don't mind the clipping
div.media-frame {
width: 300px;
height: 300px;
}
img.media {
overflow: hidden
width: 300px
height: auto /* you may need to play with your defaults */
}

Making image fit screen on click

I have an image that when clicked I wanna make fit screen. I'm currently using a simple IMG tag linking to the full image, but its not what i want.
<div> <img src="img.jpg" width="100%"> </div>
I want to make it fit screen (onclick), like it happens on the Tumblr or Twitter app on my iphone. Here's an example of the kind of effect I'm describing, but using an image.
I'm trying to make it happen in php or javascript, if possible, for Wordpress. Any help, including how you call this function, would be appreciated.

Assuming you mean "make it fit screen" to mean the browser window entirely, you can do this!
/* Adding the class to the image itself */
$('div').click(function () {
$(this).children('img').addClass('full-size');
});
/* Adding the class to the container div */
$('div').click(function () {
$(this).addClass('full-size');
});
/* CSS */
.full-size {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}

Background-image resize after window-size

I'm pretty new to web-development and web-design, and I'm working on a website for a company right now(www.momentium.no). They want to have the background image(s) at the top recognize the browsers window-size, so that the image(s) fills the whole screen and don't show the content below before you scroll down when you load the website.
Could anyone of you check this out? Would be great to get a little bit of help!
Thanks,
Yngvar

Setting the height to 100% using CSS will work, but you'll have to revise your HTML structure in order to maintain it's flow when the window is resized.
Otherwise, you can try the following code snippets:
JS:
var $imageWrapper = $('#background-image'),
$contentSpacer = $('section#wrapper > header'),
// Some buffer value, adjust this to get the rest of the content aligned properly
buffer = 200;
// Set the div height on pageload
$(document).ready(function() {
var windowHeight = $(window).height();
$imageWrapper.height( windowHeight );
$contentSpacer.height( windowHeight );
});
// Change the div height on window resize
$(window).resize(function() {
var $this = $(this),
thisHeight = $this.height();
// Set the height of the image container to the window height
$imageWrapper.height( thisHeight );
$contentSpacer.height( thisHeight - buffer );
});
CSS:
#background-image {
background-size: cover;
// Change this to the minimum height your page will support
min-height: 600px;
}
The rest of the code you have seems correct, so adding these should fix things up. A couple of things to keep in mind here:
The JS isn't placing any limitation on the height being applied here, so the CSS will still apply even if the window is resized to 10px height. Most designs have a minimum height/width before breaking, so using a min-height on your #background-image div might be a good idea.
Check the browser support before implementing, if you need to support one of the unsupported browsers, you'll need to either write a fallback or restructure your code in such a way that it degrades gracefully. IE9+, Chrome21+ and FF26+ should be good enough though.
Looks like you're using a spacer in the main section to ensure that the page content comes in after the main slider. The structure of the page can be modified so that you don't have to modify two element heights. As I mentioned at the beginning, you can probably use the pure CSS solution if you restructure.

You can have 2 solutions :
As Pete says, you can use "background-size" css3, but it will not be compatible for older browser
You can use javascript with $(window).height() and $(window).width

The Only Way is create a repponsive design for your company..all the problem will be solved by responsive design...
Change the image size depends upon the browser window size Other wise
change the image to another one also possible

You can set the height of your "background-image" div to 100%, it will work.
Check this code:
#background-image {
width: 100%;
height: 100% !important;
position: absolute !important;
overflow: hidden;
text-align: center;
background: #000;
}