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.
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:
I have a div (suppose 30px width and 30px height) and i am using a sprite image for all the images ,now there is one image in the sprite at background-position : -12px -1467px (just an example)
whose width and height is 70px and i want to apply this image as background to given div.
The problem is how to scale that image to fit in the div size.
This should not break if i increase or decrease the div size based on resolution.
My sprite's width and height can be changed (more images can be added later in the sprite).
This question may be duplicate as few people suggested but i am not able to understand those question properly.
I have created a fiddle for this.
In the fiddle 2nd div shows the original sprite,and in the first div i want to show only first image but when i resize the div the first image should resize with div (like if i am using an individual image instead of a sprite).
One way to do this to have first div equal to first image and then on resize use something like transform:scale(.5) ,but i don't want to use that.
Set background-sizeto whatever % you need to fill the div
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.
Trying to make the jumbotron fit all of the page, because now its not stretched full in the bottom. I tried position fixed, but that made a problem when I get more content in the container its must be able to scroll.
bootply: http://www.bootply.com/125955
From what I can tell your jumbotron technically fits all of the page, You're styling the inner container with background colour and borders which makes it appear like it doesnt fit the page.
Take the background-color and border styles off .container, and add them to .jumbatron also add width:100% to .jumbatron if you want it the entire screen width.