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

HTML/CSS – How to autofit/scale multiple images onto 1 row – Photoshop

I cut a flowchart drawn in Photoshop into various "parts" that I want to "reassemble" onto a webpage. All of the "parts" have the same height but different widths. To fully reassemble the flowchart, I’d need 4 rows and each row would have anywhere from 4 to 5 images. I would like the "flowchart" to automatically scale with the window size.

How would I do about doing this in HTML/CSS?

Tags:

2

Answers


  1. 0

    use this display:flex;flex-wrap:wrap;

    <div class="images-row">
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
</div>

 **style of CSS**
 .images-row{display:flex;flex-wrap:wrap;}
 .images-row div{width:17%;padding:5px;}
 .images{ width:100%; height:150px;background:#ccc;}
    Login or Signup to reply.
  2. 0

    You can use responsiveimages for them to scale with the windows size:

    width: 100%; max-width: 400px; height: auto;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search