0

I am currently working on a website design using HTML and CSS and I want to position this image to fit in the page like this:

Mockup Design I made.

I need it to be responsive.

What I did for its part is:

HTML:

<div class="intro">
    <img src="https://i.stack.imgur.com/GGDym.png" class="sensei-img">
</div>

CSS:

.intro {
  width: 100vw;
  height: 100vh;
  position: relative;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  overflow: overlay;
  display: flex;
  flex-direction: row;
}
.intro .sensei-img {
  position: absolute;
  left: 5vw;
  bottom: -10vh;
  width: 70vw;
  height: 100vh;
}

I can position the image perfectly with position:absolute; but I can't seem to be able to make it's size responsive (I want it to retain its ratio even if the viewport changes). What should I do?

TylerH
  • 20,799
  • 66
  • 75
  • 101
spadletskys
  • 125
  • 7
  • 2
    "Responsive" just means "Adapts to fit the window". You haven't said *how* you want it to adapt. – Quentin Mar 07 '23 at 13:25
  • I want its size to be responsive and to stay in its ratio even if the viewport changes. Please tell me if I need more explaining. – spadletskys Mar 07 '23 at 13:32
  • 2
    When the window is very thin and long (e.g. a portrait mode phone) where do you want to place the image in relation to the text? [and many other questions in relation to font size and small devices and different aspect ratios]. – A Haworth Mar 07 '23 at 13:34
  • I actually defined a left and top position in the CSS snippet. Anyway, I don't really mind the positioning. What I want to solve is that when I resize the browser window, the image ratio is ruined. the ratio is supposed to be 2:1 but when I resize the browser window, the image goes out of its ratio. – spadletskys Mar 07 '23 at 13:45
  • Define just whichever one you want - width or height - but not both. I guess you want to keep the height setting - but that depends on what you want to do with different viewport aspect ratios. You might also like to investigate object-fit (or background-size) contain setting. – A Haworth Mar 07 '23 at 13:49
  • Yeah thank you I'm actually a noob in css so I only learned that now hahaha – spadletskys Mar 07 '23 at 13:58

1 Answers1

0

For its ratio to be kept even if the viewport changes you can simply remove this property:
.intro .sensei-img {height: 100vh;}

The image will keep it's aspect ratio by default.

André
  • 1,602
  • 2
  • 12
  • 26
  • 1
    thanks @Andre removing one of the sizes seemed to work. Although instead of removing the heigth, I had to remove the width in my case. Thanks again! – spadletskys Mar 07 '23 at 13:59