0

How to Add the picture to the VF page that change its size dynamically according to the page size? If zoom in/out is done it should change itself?

  • Welcome to SFSE! Pleast take the tour, and read How to Ask. I believe the term you're looking for is "responsive image" (part of the larger "responsive web design" movement). As-is, this question is probably too broad for this site, and your question would benefit from including more details (which you can do in an edit to your question). What have you tried so far? What research have you done? What is the motivation for doing this (is your Visualforce page going to be viewed on mobile devices, desktops, or both)? – Derek F Jun 29 '18 at 12:45
0

You can use the CSS "vh" and "vw" measurements in order to keep the scale consistent. 1vh is 1% of the height of the screen, 1vw is 1% of the width of the screen.

<apex:page >
    <style>
    img.scales {
        width: 50vw;
    }
    </style>
    <img class="scales" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</apex:page>

Scale: 100%

100% Scaled


Scale: 25%

25% scaled

This also works if the user resizes their window, etc. It's always based on the current number of pixels available in each direction on the browser.

1

You can refer to this tutorial by Bob Buzzard on how to achieve this. He suggests multiple options to do this including the use of open-source library PictureFill

A simple example using PictureFill and and responsive zooming is below

<apex:page standardStyleSheets="false" showHeader="false">
  <style>
    .respImageContainer {
        padding-top:10px;
    }
  </style>

  <apex:includeScript value="{!$Resource.PictureFill_1_2}" />
    <div class="respImageContainer">
      <span data-picture="1" data-alt="S1 Dev Week">
        <span data-src="{!$Resource.S1DevWeekSmall}"></span>
        <span data-src="{!$Resource.S1DevWeekMed}"
              data-media="(min-width: 768px)"></span>
        <span data-src="{!$Resource.S1DevWeekLarge}"
              data-media="(min-width: 1024px)"></span>
      </span>
    </div>

    <script>
      window.picturefill();
    </script>
</apex:page>

Alternatively, you can do this using any responsive CC framework and media queries as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.