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
});
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.
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:
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.
Normally, the HTML <img> tag squeezes the image if the width or height attribute is smaller than the image itself. Is there a way to instead make it crop it if the specified size is smaller?
You can add the image as a background of a wrapper div and set the div's width and height. Or you can add a wrapper element around the img and set height and width to the wrapper element.
See
http://jsfiddle.net/nivas/zFMfj/
I don't think you can do this with the img tag by itself, however there are a number of ways you could do this with the image file and another tag (canvas->DrawImage, Div->Background Image or Div->Oveflow: hidden) for example.