1

I am desperately trying to put my image between 2 div blocks and that this one be responsive.

I suggest taking a square image because as you can see I want my image to fit in a circle and since the height is set to auto in my absolute-block(because I want to keep the responsive behavior) the shape would be a rectangle.

html, body {
      width: 100%;
      height: 100%;
}
.child1 {
      width: 100%;
      height: 200px;
      background-color: red;
}
.child2 {
      width: 100%;
      height: 200px;
      background-color: green;
}
.main {
      position: relative;
      width: 100%;
}
.absolute-block {
      position: absolute;
      top: 25%;
      left: 40%;
      width: 16%;
      border: 2px solid yellow;
}
img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      border: 5px solid white;
}
<body>
  <div class="main">
    <div class="absolute-block">
      <img src="test.jpg">
    </div>
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>

So if everything goes well it should look something like that:

rendering

And now when I try to horizontally shrink the size of my window, I would like the size of my image to shrink vertically and horizontally (ok that works) and I would like the center of my image to stay between the 2 divs (it doesn't work). What can I change to my code to get this result?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jordan
  • 83
  • 1
  • 9
  • Is there a reason for not using a simple background image? – Rainbow Apr 13 '20 at 12:21
  • Do you mean put a background in the absolute-block? If I do that I need to specify a height and my image is not responsive anymore – Jordan Apr 13 '20 at 12:46

2 Answers2

1

First just center the absolute block in the middle of the container, we can do that with

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

top and left will position the element according to it's top left corner, Then we use transform to shift the element half way in both direction according it's own width and height.

Now once the block is perfectly centered we can add whatever we want inside it.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

.child1 {
  width: 100%;
  height: 200px;
  background-color: red;
}

.child2 {
  width: 100%;
  height: 200px;
  background-color: green;
}

.main {
  position: relative;
  width: 100%;
}

.absolute-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16%;
  border: 2px solid yellow;
}

img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 50%;
  border: 5px solid white;
}
<div class="main">
  <div class="absolute-block">
    <img src="https://i.picsum.photos/id/353/300/300.jpg">
  </div>
  <div class="child1"></div>
  <div class="child2"></div>
</div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
0

Would you like to give a try with following,

img {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
Kiran Kuyate
  • 99
  • 7
  • Thank you for your quick response. However, the problem with that is I have a big gap at the initial position of my image. That's why I used absolute position – Jordan Apr 13 '20 at 12:39