How can I set the initial position of a scrollable image all the way to the right?

Question

Ignore the php if it bothers you. I just added it for context of what I am doing. It is not important for the actual question.

I have an scrollable image that is larger than the screen and I want to initially see the right half of the image so the scroll bar is all the way to the right. With this code, the image starts all the way to the left as is normal. It can scroll to the right and works fine but I want it to start on the right. The $url image is a php generated graphical image showing 3 days of data and the most important data is today which is on the right of the image.

            echo "<div class = \"border container\">";
                echo "<img style=\"min-width:600;\" src=\"$url\">";
            echo "</div><br style=\"clear:both;\">";

My css

    .container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}


div.border{
    margin: 0 auto;
    max-width: 900px;       
    background-color:white;
    margin-top:15px;
    margin-bottom:15px;
}

I tried this

echo "<img style=\"min-width:600;float:right;\" src=\"$url\">";

It does look like I want initially but it won't scroll

Is there a way to do this?

Answer 1

You can use "direction:rtl;". I just removed the PHP code to show

.container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  direction: rtl;
}


div.border{
  margin: 0 auto;
  max-width: 900px;       
  background-color:white;
  margin-top:15px;
  margin-bottom:15px;
}

    <div class ="border container">;
        <img style="min-width:600" src="https://picsum.photos/1200/900">;
    </div><br style="clear:both">;