Scrolling & Window size changing with image displayed pixel to pixel in it (php, js)

Question

I'm writing a simple forum that should show images. I need to display by default only a part of image (default width and default height). I need users to be able to resize the size of this window. So when user enlarges the window, more of the image should fit into it. Scrolling should be available too (i found about scrolling -- Scroll full image inside div

but it doesnt allow to change window size. How to do it? Thanks

js:

imgUrl= document.getElementById("view_topic").getAttribute( "data-url" );
$('.img-wrapper').append($('<img id="theImg">').attr({
'src': imgUrl , //'https://' + imgUrl ,
'alt': 'test image'
})
).scrollTop(9999)

css:

.img-wrapper {
overflow: auto;
height: 200px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
display: block;
height: auto;
width: 100%;
position: absolute;
/*top: -50%;*/
vertical-align: top;
}

html:

<html>
<div id="myDiv" class="img-wrapper">
</div>

</html>

Does [How to resize image in Webpage with mouse](https://stackoverflow.com/q/54263429/5217142) answer your question? — traktor, Jun 14 '20 at 02:16
@traktor53 I need scrollable images . my code uses div class img-wrapper. how to interconnect these 2 classes. Furthremore, I need not to enlarge the image by users mouse pulling lower right corner, but to show more of the image if user has enlarged the size -- ie to show image pixel to pixel — Alexey Podshivalin, Jun 14 '20 at 06:17

score 0 · Answer 1 · answered Jun 15 '20 at 01:04

The CSS resize attribute is described as working on "any element". See "How to resize image in Webpage with mouse"" for use on image elements.

The following code snippet demonstrates both scrolling and resizing a containing block containing a fixed size image.

For demonstration purposes the image.wrapper has been styled as an outlined block of size 64 x 64 pixels, and the CSS reduced to a minimum to display scroll bars and a resize handle. This will need changing in actual use.

"use strict";

let imgUrl= document.getElementById("view_topic").getAttribute( "data-url" );
$('.img-wrapper').append($('<img id="theImg">').attr({
'src': imgUrl , //'https://' + imgUrl ,
'alt': 'test image'
})
).scrollTop(9999)

.img-wrapper {
    overflow: auto;
    display: inline-block;
    resize: both;
    width:64px;
    height:64px;
    border: medium solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- body-html -->
<p id="view_topic", data-url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAn0lEQVR42u3bQQ0AMAwDsXVUwh9SuYxGJvkQRFa/nd09TSWp2nOr1hQGCBAgQIAAAQIESIAAAQIECBAgQAIECBAgQIAAARIgQIAAAQIECBAgAQIECBAgQIAACRAgQIBamrZBbf9rLggQIECAAAECBEiAAAECBAgQIEACBAgQIECAAAESIECAAAECBAgQIAECBAgQIECAAAkQIECAAH3SA7LaBla8XUCmAAAAAElFTkSuQmCC">
 view_topic: four grey and black squares
</p>
<div id="myDiv" class="img-wrapper">
</div>

The CSS resize property is not supported by obsolete browsers such as IE. A web search for "jquery plugin resizable" lists various jQuery related options that may help support older browsers.

Scrolling & Window size changing with image displayed pixel to pixel in it (php, js)

1 Answers1