CODEWITHSUNDEEP
htmlcss
Griffin Malone
Griffin Malone

Reputation: 29

How to fix images not moving when page moves

I am working on a personal portfolio website and having trouble getting an image to move when the screen does.

Sorry if I explain any of this bad but what I have is in imaged centered and when the page gets smaller I want the image to resize proportionally. (I thought flexbox did this but I could not find an answer there)

<div class="photopage">
    <img src="images/titlepage.png">
</div>

Is this the right Html? or should I just have an image.

At the moment my CSS just sets the img over 10vw. I realize that is not the way to go if I want everything to stay centered and proportioned when the screen moves.

Upvotes: 1

Views: 837

Answers (2)

ha_ryu
ha_ryu

Reputation: 598

is this what you wanted to do?

[HTML]

<p>
   this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<p>
this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<p>
this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<p>
this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

[CSS]

html {
background-image: url(https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg);
background-attachment: fixed;
}

p {
  color: #fff;
}

https://jsfiddle.net/hass/p3dk2t6k/

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

You just want to give the image some sort of relative width, so that it will scale relative to the width of the parent, screen width (vw), etc.

The easiest way to get the image to scale with it's container is just to use max-width: 100%;. As the parent resizes, the image will resize inside of it relative to the parent width.

img {
  max-width: 100%;
}
<div class="photopage">
  <img src="http://i1-news.softpedia-static.com/images/news2/Our-Entire-Galaxy-Might-Be-One-Mammoth-Wormhole-Brainiacs-Say-470824-2.jpg">
</div>

Here's an example of how to scale the image with the viewport width.

img {
  width: 50vw;
}
<div class="photopage">
  <img src="http://i1-news.softpedia-static.com/images/news2/Our-Entire-Galaxy-Might-Be-One-Mammoth-Wormhole-Brainiacs-Say-470824-2.jpg">
</div>

Upvotes: 2

Related Questions