Photoshop Question posted in
The official user guide can be found here.

How to Scale Graphics on Web Page Correctly – Photoshop

First time asking a question here, and I appreciate the help and/or advice.

I’m trying to make it so that multiple graphics on the page resize a certain way when changing the width of the viewport of the browser. It’s a bit difficult to explain what I want so I’ll just do my best. If you look at my sample page, you can see that I have it set up so that the graphics consisting of black rectangles scale down when making the viewport narrow, and scale up when making the viewport wider, which is exactly what I want.

The problem is that it seems the graphics don’t act altogether. I want them to act as though they’re linked. For instance, if you were to narrow the viewport, they should all get smaller from the bottom right to the top left, and move to the top left as the viewport gets smaller. Instead, the tops of the images stay on the same place, and they get too far apart if the viewport narrows, and overlap if it widens.

Imagine if you have various objects on its own layer in Photoshop, and you transform these layers to make them smaller by dragging the bottom right corner to the top left. You would see all of the layers act as though they’re linked together, and even though you positioned these objects in certain places, they would move accordingly, not stay fixed in their current position like what’s happening on my page. How you do this in Photoshop is how I want the graphics to behave on my page.

I’m guessing that the problem is that I’m using absolute positioning with pixel values to define how far from the top they are to be positioned, and so the browser obeys those rules, but I don’t know how else to accomplish what I want. I tried using relative positioning, I tried using margin settings instead of position settings, and I tried various other ideas that I saw online, but I just can’t figure this out.

Please let me know how to accomplish what I want, and please ask me any questions that you need answers to. Thank you.

Here is the link to my sample page:

http://www.marifysworld.com

body {
    margin: 0px;
    padding: 0px;
    background-color: #ffffff}

    img {
    display: block;
    margin: 0px;
    padding: 0px}

    .a {
    width: 21.65%;
    height: auto;
    position: absolute;
    left: 0%;
    top: 175px}

    .b {
    width: 35.2%;
    height: auto;
    position: absolute;
    left: 32.4%;
    top: 41px}

    .c {
    width: 21.15%;
    height: auto;
    position: absolute;
    right: 0%;
    top: 0px}

    .d {
    width: 26.6%;
    height: auto;
    position: absolute;
    left: 0%;
    top: 733px}

    .e {
    width: 22.6%;
    height: auto;
    position: absolute;
    right: 0%;
    top: 599px}

    .f {
    width: 16.05%;
    height: auto;
    position: absolute;
    left: 44.6%;
    top: 927px}
<body>
    <img class="a" src="http://www.marifysworld.com/images/content/regular/a.jpg" alt="block" />
    <img class="b" src="http://www.marifysworld.com/images/content/regular/b.jpg" alt="block" />
    <img class="c" src="http://www.marifysworld.com/images/content/regular/c.jpg" alt="block" />
    <img class="d" src="http://www.marifysworld.com/images/content/regular/d.jpg" alt="block" />
    <img class="e" src="http://www.marifysworld.com/images/content/regular/e.jpg" alt="block" />
    <img class="f" src="http://www.marifysworld.com/images/content/regular/f.jpg" alt="block" />
    </body>
Tags:

2

Answers


  1. 0

    If I understand correctly you need a wrapper for the images:

    <div style="position: relative;width: 10%;">
<img class="a" src="http://www.marifysworld.com/images/content/regular/a.jpg" alt="block">
<img class="b" src="http://www.marifysworld.com/images/content/regular/b.jpg" alt="block">
<img class="c" src="http://www.marifysworld.com/images/content/regular/c.jpg" alt="block">
<img class="d" src="http://www.marifysworld.com/images/content/regular/d.jpg" alt="block">
<img class="e" src="http://www.marifysworld.com/images/content/regular/e.jpg" alt="block">
<img class="f" src="http://www.marifysworld.com/images/content/regular/f.jpg" alt="block">
</div>

    In your example the images are absolute to the body tag, but if you make a wrapper around them they will be absolute positioned to the wrapper and you can resize the wrapper to make all the images smaller at once.

    Login or Signup to reply.
  2. 0

    If we know the height of a screen on which the layout looks good, then we can scale all the position top values in relation to the height of the screen which is actually being used.

    Note: this may or may not be what is wanted. It may be that calculating in relation to the width of the screen gives the required result. It’s not possible to know from what is given in the question.

    This snippet uses a CSS variable, –d, which we define as the height (or width if preferred) of the ‘good’ screen and then calculate in relation to that using CSS calc. If the width is preferable then change the snippet as shown in the comments.

    body {
margin: 0px;
padding: 0px;
background-color: #ffffff;
position: relative;

/* ADDED */
--d: 600;  /* put in the height(or width) of the screen which makes the page look good (in CSS px but without the px) */
--use: 100vh;/* put in 100vw instead here if you want to use width of a good screen instead of height */
}

img {
position: relative;
display: block;
margin: 0px;
padding: 0px;
top: calc((var(--top) / var(--d) * var(--use)));
}

.a {
width: 21.65%;
height: auto;
position: absolute;
left: 0%;
--top: 175;}

.b {
width: 35.2%;
height: auto;
position: absolute;
left: 32.4%;
--top: 41;}

.c {
width: 21.15%;
height: auto;
position: absolute;
right: 0%;
--top: 0;}

.d {
width: 26.6%;
height: auto;
position: absolute;
left: 0%;
--top: 733;}

.e {
width: 22.6%;
height: auto;
position: absolute;
right: 0%;
--top: 599;}

.f {
width: 16.05%;
height: auto;
position: absolute;
left: 44.6%;
--top: 927;}
    <img class="a" src="http://www.marifysworld.com/images/content/regular/a.jpg" alt="block" />
<img class="b" src="http://www.marifysworld.com/images/content/regular/b.jpg" alt="block" />
<img class="c" src="http://www.marifysworld.com/images/content/regular/c.jpg" alt="block" />
<img class="d" src="http://www.marifysworld.com/images/content/regular/d.jpg" alt="block" />
<img class="e" src="http://www.marifysworld.com/images/content/regular/e.jpg" alt="block" />
<img class="f" src="http://www.marifysworld.com/images/content/regular/f.jpg" alt="block" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search