Fluid Responisve Images

[perryc]

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.

[Kwisatsoundman]

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 November 2, 2017 by Kwisatsoundman