Ivarkentje Ivarkentje - 1 month ago 6
CSS Question

Make a responsive image with bottom 0 and make other responsive images depend on that image

This is my first post on this website and i will try to make my question as clear as possible. If it isn't clear i will try and explain as best as i can.

I'm making a responsive design with 2 images, later on i will add some more.

one of the images is the a part of the head which needs to be always on the bottom. The other part needs to be always on top. This needs to be responsive.

I did some research and found that the best way to do this is with %. I will post some code of my tries.

The code below this is just a technique that can be used to achieve something like i want.



.wrapper {

border: 2px solid #000;

position: absolute;

bottom: 0;

width: 90%;

margin: 0;

}

.outer {

position: relative;

width: 40%;

height: 120px;

margin: 0 auto;

border: 2px solid #c00;

overflow: hidden;

}

.inner {

position: absolute;

bottom: 0;

margin: 0 25%;

background-color: #00c;

}

.inner-onder {

position: absolute;

text-align: center;

top: 0;

background-color: #00c;

margin: 0 25%;

}

img {

width: 50%;

height: auto

}

<div class="wrapper">
<div class="outer">
<img class="inner " src="http://img.india-forums.com/images/600x0/57963-still-image-of-pooja-gaur.jpg" />
</div>
<div class="outer">
<img class="inner-onder " src="http://img.india-forums.com/images/600x0/57963-still-image-of-pooja-gaur.jpg" />
</div>
</div>




Answer

I have used relative width and an absolute position/horizontal transform of the parent container to give you the look you want.

Note: I took care of the gap created below the images in their containers by giving the containers a line-height: 0;

.container {
  width: 50%;
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.head, .body {
  text-align: center;
  line-height: 0;
}
img {
  width: 100%;
}
/* in the case of the images I was working with I had to add the styles below because the head image was enlarged after being sliced from the body image.  If you don't resize the head when you split the picture you won't need the extra styling */
.head img {
  width: 38%;
  transform: translateX(-14%)
}
<div class="container">
  <div class="head"><img src="http://c7ee2562.ngrok.io/portfolio/img/head.png" alt="" /></div>
  <div class="body"><img src="http://c7ee2562.ngrok.io/portfolio/img/thinkingn.png" alt="" /></div>
</div>

Comments