Jump to content

Fluid Responisve Images


perryc

Recommended Posts

Is there a way to make an image responsive/fluid so it scales correctly while the image is absolute positioned?

 

i'm using max-width: 100%; property to scale the other images on the page? But can't get this one without removing the positioning.

 

 

 

Thanks.

Link to comment
Share on other sites

  • 3 years later...

Hello perryc,

If you're still alive since you posted your last question on this forum (just kidding...), in order to get your absolutely positioned image to scale the way you want, you have to do two things :

1) Be sure to wrap your absolutely positioned image(s) in a relatively positioned container.

2) Set the desired width for each of the images you want to scale in a relative unit (like in percentage for exemple), and not in a fixed unit (like in pixels for exemple).
It is not enough to set a max-width equal to 100% for all your images, because the "width" value applied to each of your images will take precedence over the general "max-width" value. In other words, width and max-width are two different properties.

3) Don't forget to add a min-height to your container if you ONLY have HTML elements that are positioned abolutely inside of it, otherwise this container will no longer be aware of their existence. (When you position an element absolutely, you completely remove it from the natural flow of the page.)

So, to summarize, here is an example where I put two images (with "position: absolute") inside of an overall container (with "position: relative").
The first image appears in the top left hand corner of the container ; the second image, in the bottom right hand corner.
If you try this setting, you'll see that both images scale perfectly, even with "position: absolute" applied to them.

 

<div class="container">
	<img class="absolute first" src="my_bogus_image1.jpg">
  	<img class="absolute second" src="my_bogus_image2.jpg">
</div><!-- end of container -->
img {
	max-width: 100%;
  	height: auto;
}

.container {
	position: relative;
  	width: 90%; /* Whatever width you want it to be. */
  	min-height: 850px; /* In case you ONLY have ABSOLUTELY positioned html elements (like images) inside of your container, you must set a min-width sufficient to contain all your images. */
}

.absolute {
	position: absolute;
  	/* Use the top, left, right and/or bottom properties as usual to position the image in relation to the container div */
}

.first {
	top: 0; left: 0;
  	width: 20%; /* Whatever width you want, but expressed in a relative unit. */
}

.second {
	bottom: 0; right: 0;
  	width: 30%; /* Whatever width you want, but expressed in a relative unit. */
}

 

Edited by Kwisatsoundman
  • Upvote 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...