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

3 Scaling images inline – Photoshop

So, I created an image in photoshop that is 1920×1080 and I’ve spliced it into sections, so that the images that require a link can have an javascript tag attached to them for a link.

I want the images to scale depending on the type of monitor you’re using, as long as you’re in a 16:9 ratio. The problem I’m having, is in regards to the way the images align 3 in a row. Either the 3rd image in the row gets pushed down, for sections with 3 images. Or, the image is the full size 1920×1080, but no scaling and gaps between images.

My HTML looks like this: 

<main>
    <section>
        <img src="images/NuclearFuelCycle1.png"/>
    </section>
    <section>
        <div><img id="1" src="images/NuclearFuelCycle2.png"/><span style="cursor:pointer" onclick="openMining()"><img id="2" src="images/NuclearFuelCycle3.png"/></span><img id="3" src="images/NuclearFuelCycle4.png"/></div>
    </section>
    <section>
        <img src="images/NuclearFuelCycle5.png"/></section>
    <section>
        <img src="images/NuclearFuelCycle6.png"/><span style="cursor:pointer" onclick="openConversion()"><img src="images/NuclearFuelCycle7.png"/></span><img src="images/NuclearFuelCycle8.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle9.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle10.png"/><span style="cursor:pointer" onclick="openEnrichment()"><img src="images/NuclearFuelCycle11.png"/></span><img src="images/NuclearFuelCycle12.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle13.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle14.png"/><span style="cursor:pointer" onclick="openReactor()"><img src="images/NuclearFuelCycle15.png"/></span><img src="images/NuclearFuelCycle16.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle17.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle18.png"/><span style="cursor:pointer" onclick="openSpentFuel()"><img src="images/NuclearFuelCycle19.png"/></span><img src="images/NuclearFuelCycle20.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle21.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle22.png"/><span style="cursor:pointer" onclick="openFuelFabrication()"><img src="images/NuclearFuelCycle23.png"/></span><img src="images/NuclearFuelCycle24.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle25.png"/></section>
    <section>
        <img src="images/NuclearFuelCycle26.png"/><span style="cursor:pointer" onclick="openStorageDisposal()"><img src="images/NuclearFuelCycle27.png"/></span><img src="images/NuclearFuelCycle28.png"/>
    </section>
    <section>
        <img src="images/NuclearFuelCycle29.png"/>
    </section>
</main>

My CSS looks like this: 

* {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}

body {
    max-width: 100% !important;
    height: auto;
}

main {
    display: inline-block;
    padding: 10px;
}

section div img{
    width: auto;
}

Some of this code is not useful… It’s me experimenting to try and create a solution. Any help would be greatly appreciated, I have to submit this in 2 days P

Tags:

2

Answers


  1. 0

    If I’m understanding correctly your sliced image segments are repositioning incorrectly as the browser window resizes.

    Rather than slicing up your image and using javascript, why not try a pure HTML solution and use the <map> tag to insert your links at various parts of the image?

    Here’s a Fiddle demonstrating a scalable HTML image map (uses the image-map-resizer plugin)

    You can learn more about image maps here.

    Login or Signup to reply.
  2. 0

    The ‘spaces’ problem is most likely due to the way display:inline works, which is what an image and a span is. Any newlines, etc get treated as a space char. An easy fix could be something that uses display:flex.

    The second (and main part) of your problem is that you want to scale based on width. A little bit of javascript and use of transform: scale(...) fixes that. Below is a snippet (which can’t show resizing), so here’s a CodePen too: https://codepen.io/anon/pen/PpXpwO

    window.onresize = resizer;
resizer();
function resizer() {
  console.log("resized")
  var _main = document.querySelector("main");
  var image_width = 600; // the original image width
  var ratio  = _main.offsetWidth/image_width;
  _main.style.transform = "scale("+ratio+")";
};
    main {
  transform-origin: 0 0;
}
section {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
section * {
  flex: 0 0 auto;
  display: block;
}
    <main>
  <section>
    <img src="https://placehold.it/600x150g" />
  </section>
  <section>
    <img id="1" src="https://placehold.it/100x150" />
    <a style="cursor:pointer" onclick="openMining()"><img id="2" src="https://placehold.it/300x150/370000" /></a>
    <img id="3" src="https://placehold.it/200x150" />
  </section>
  <section>
    <img src="https://placehold.it/600x150g" />
  </section>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search