I am having more div over an image.and i am having zoom in and zoom out option to resize the image.when i resize an image, i want to resize the divs present over an image. How to achieve it using HTML and css.
The image needs to be placed as a background of a div and the other divs then need to be positioned absolutely against that div e.g. like this:
Related
I'm trying to have a div and an img overlay each other exactly (same width and height) so I can use the div to position some elements that should be markers over the image.
I only have a fixed height available to display the image, so I'm using max-width and max-height to scale the image down to fit the parent container.
The parent container is a flex so the image can be centred horizontally and vertically.
Using tailwind (but not relevant to the issue), I manage to get it almost working as it should be but their is always an aspect ratio of the image where something isn't quite right.
Here is a sample on stackblitz trying to show the problem https://stackblitz.com/edit/tailwindcss-wwat2v?file=index.html:
The layout is split in 2, the left is the "main" view and the right is the preview with smaller images
The main image should be centred horizontally and vertically
A should overlay the image so I can use it to position markers over the image.
The marker image (cat snout) should be centred over the image
The expectation is for the layout to look as the first example in the sample but with images that can be wider or taller than the parent container. The ~closest is the last attempt but their is a margin to the image somehow.
This seems to be a tricky one :).
Here is a fiddle http://jsfiddle.net/xhrkLwwL/2/ and there a description with some pseudo-code (accurate code in fiddle):
<div id="gridSettings" style="height:100%">
<div id="gridSmaller" style="height:100%">
<img id="gridSmallerImg" style="height:200%"/>
</div>
</div>
I am trying to make responsive square icons based on height and css only.
Theory is following:
I have a square icon image (200x400px - two in one for hover purposes).
Image is inputed into html as <IMG> (NOT as css background property). The <IMG> has it's wrapper DIV and <IMG> is se to height:200%. I am expecting the IMG to scale so that I can see only top 50% and the width of the DIV to be determined by the width of IMG, which is same as the visible height (50% of total height) -> since the image is 200x400px... there you go... a SQUARE :).
Practice:
It works until I resize window. Height of the icon-wrapping DIV is 10% of window height, so if I resize window, DIV height goes as well, and so does the IMG inside. BUT the DIV's width stays the same as before resizing and so my icons get clipped :(. If I then change any css prop (via FF DOM Inspector, hover event...), the DIV updates to correct width.
Does anyone have any idea, what could be causing it?
Thank you very very much :)
PS: No need for you to send me JS solution. If neccessary I can write my own.
i have two div in my html page like this image.
main div with background image has responsive technology. i have second div with face picture as main div content that show in above picture with red border, which its resizing should be correspond to the main div background in a way that it's Aspect ratio remains last value.
http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/
You have to manipulate the padding property on the parent div to get the desired effect of retaining the aspect-ratio. If you show me your code from some live website, I can further pin-point where you need to make the changes in your CSS.
I have an image that is dynamically resizable.
The image is part of a gallery, so on the top/right corner, I have thumbnails to view images in that gallery.
Both the thumbs and image are contained within a div with class .slider.
The .slider div always stretches to width of browser, and the thumbs are positioned relative to the .slider.
If I can get the .slider div to always reflect the width of the image, it would be perfect, because then the thumbs would always flush right with the image (instead of the browser window, as it does now).
Remember the image is dynamically resizable vertically and horizontally, so I had to strip the image width and height.
Here is link of actual sample: http://peteryang.com/v02/image/tylenol/
Attach an event on the image load or show or resize using jQuery (just google it) and in the event handler find the width and height of the image and set the width and height of your parent div
$("#imageid").resize(function(){
//set the dimensions of the div
});
I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image.
However, the following conditions must be met:
The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas.
The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work.
What options do I have?
You should be able to use position:relative instead of absolute for your first requirement.
For the second I'm guessing you could put both the image and the canvas inside of a span. The canvas would have a width/height of 100% and would be resized as the image resizes because the size of the div would change to fit the image.
EDIT: actually I'm not sure position:relative would work. But I believe if you use position:absolute and the parent element has position:relative, than the absolute positions will be relative to the parent.