Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #24477 > unrolled thread

Resizing images

Back to article view | Back to comp.lang.javascript

Contents

  Resizing images emf <emfril@gmail.com> - 2014-05-30 09:01 -0400
    Re: Resizing images "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-05-30 16:17 +0200
      Re: Resizing images Christoph Michael Becker <cmbecker69@arcor.de> - 2014-05-30 19:20 +0200
        Re: Resizing images Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-05-30 21:51 +0200
          Re: Resizing images Christoph Michael Becker <cmbecker69@arcor.de> - 2014-05-31 13:27 +0200
            Re: Resizing images emf <emfril@gmail.com> - 2014-06-01 07:31 -0400
              Re: Resizing images Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-01 20:24 +0200
                Re: Resizing images emf <emfril@gmail.com> - 2014-06-02 05:39 -0400
                  Re: Resizing images Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-02 12:14 +0200
                    Re: Resizing images emf <emfril@gmail.com> - 2014-06-02 15:36 -0400
                      Re: Resizing images Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-02 21:47 +0200
                        Re: Resizing images Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-02 23:24 +0200
          [FAQ Discussion] How do I find the size of the window? (was: Resizing images) Christoph Michael Becker <cmbecker69@arcor.de> - 2014-05-31 20:41 +0200
            Re: [FAQ Discussion] How do I find the size of the window? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2014-05-31 22:07 +0200
              Re: [FAQ Discussion] How do I find the size of the window? Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-02 14:56 +0200

#24477 — Resizing images

How can I make large images get resized to the height of the viewers 
browser window?

[toc] | [next] | [standalone]

#24480

emf <emfril@gmail.com> wrote on 30 mei 2014 in comp.lang.javascript:

> How can I make large images get resized to the height of the viewers 
> browser window?

Use CSS: "100%"

This is not the right NG for CSS. 

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#24485

Evertjan. wrote:

> emf <emfril@gmail.com> wrote on 30 mei 2014 in comp.lang.javascript:
> 
>> How can I make large images get resized to the height of the viewers 
>> browser window?
> 
> Use CSS: "100%"
> 
> This is not the right NG for CSS. 

ACK.  However, I am not aware how the OP's request could be solved with CSS.

Some information on how to determine the viewport height can be found in
the NG's FAQ[1]--I suspect that this information is not up-to-date, though.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24495

Christoph Michael Becker wrote:

> Evertjan. wrote:
>> emf <emfril@gmail.com> wrote on 30 mei 2014 in comp.lang.javascript:
>>> How can I make large images get resized to the height of the viewers
>>> browser window?
>> 
>> Use CSS: "100%"
>> 
>> This is not the right NG for CSS.
> 
> ACK.  However, I am not aware how the OP's request could be solved with
> CSS.

It can.  Consider the effect that the values of the “position” property have 
on other box properties.
 
> Some information on how to determine the viewport height can be found in
> the NG's FAQ[1]--I suspect that this information is not up-to-date,
> though.

You (and everyone else) are welcome to provide (further) suggestions for 
improvement.
 
-- 
PointedEars
[1] FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24503

Thomas 'PointedEars' Lahn wrote:

> Christoph Michael Becker wrote:
> 
>> Evertjan. wrote:
>>> emf <emfril@gmail.com> wrote on 30 mei 2014 in comp.lang.javascript:
>>>> How can I make large images get resized to the height of the viewers
>>>> browser window?
>>>
>>> Use CSS: "100%"
>>>
>>> This is not the right NG for CSS.
>>
>> ACK.  However, I am not aware how the OP's request could be solved with
>> CSS.
> 
> It can.  Consider the effect that the values of the “position” property have 
> on other box properties.

Indeed, I overlooked position:fixed.  But I'm not sure, if that's what
the OP desires; the question is somewhat vague.

[xpost & fup2 comp.infosystems.www.authoring.stylesheets]

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24520

On 2014-05-31 08:46 Thomas 'PointedEars' Lahn wrote:
> Christoph Michael Becker wrote in comp.lang.javascript:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> Christoph Michael Becker wrote:
>>>> Evertjan. wrote:
>>>>> emf <emfril@gmail.com> wrote on 30 mei 2014 in comp.lang.javascript:
>>>>>> How can I make large images get resized to the height of the viewers
>>>>>> browser window?
>>>>>
>>>>> Use CSS: "100%"
>>>>>
>>>>> This is not the right NG for CSS.
>>>> ACK.  However, I am not aware how the OP's request could be solved with
>>>> CSS.
>>> It can.  Consider the effect that the values of the “position” property
>>> have on other box properties.
>>
>> Indeed, I overlooked position:fixed.  But I'm not sure, if that's what
>> the OP desires; the question is somewhat vague.
>
> Let us assume that “viewers browser window” meant “viewport”.  (Otherwise
> there is no way.)
>
> Then it works just as well with “position: absolute” if the container is at
> a suitable nesting level (they did not say that the image should not
> scroll):
>
>    #img-container {
>      /* or position: fixed; maybe with z-index */
>      position: absolute;
>
>      left: 0;
>      top: 0;
>      right: 0;
>      bottom: 0;
>    }
>
>    #img-container img {
>      height: 100%;
>    }
>
> or, for keeping aspect ratio in all cases, using CSS3:
>
>    #img-container {
>      /* or position: fixed; maybe with z-index */
>      position: absolute;
>
>      left: 0;
>      top: 0;
>      right: 0;
>      bottom: 0;
>      background-image: url(…);
>      background-repeat: no-repeat;
>
>      /* or background-size: contain; or background-size: cover; */
>      background-size: auto 100%;
>    }
>
> <https://developer.mozilla.org/en-US/docs/Web/CSS/background-size> pp.
>
> See also <news:12701859.t6AhdER5Ws@PointedEars.de>.

I posted my original message in the Javascript newsgroup because after 
extensive Google search I had come to the conclusion that the problem 
could not be solved with CSS, so I do not really think the CSS newsgroup 
is the appropriate one.

I do not think that the above solution applies to what I asked. First of 
all the  #img-container. I am not talking about 1 image in a fixed 
position, but about a number of images that appear as you scroll down 
the text of the webpage.

I didn't even click the link

 > <https://developer.mozilla.org/en-US/docs/Web/CSS/background-size> pp.

Who said anything about background?

I was hoping that with javascript one could get the size of the window 
and assign it to the height of each image. There should be some way of 
doing it. After all, how does the ImageZoom Firefox extension does it 
when you click Image fit?

What does viewport mean anyway?

emf


-- 
Natal Transits Calculator
https://files.nyu.edu/emf202/public/nt/nataltransits.html

[toc] | [prev] | [next] | [standalone]

#24528

emf wrote:

> I was hoping that with javascript one could get the size of the window
> and assign it to the height of each image. There should be some way of
> doing it. After all, how does the ImageZoom Firefox extension does it
> when you click Image fit?
> 
> What does viewport mean anyway?

The term viewport is the common name for what you call "size of the
window", see <http://en.wikipedia.org/wiki/Viewport#Computing>.  How to
determine its size is described in the FAQ:
<http://pointedears.de/scripts/faq/cljs/#getWindowSize>.

[xpost & fup2 compl.lang.javascript]

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24534

On 2014-06-01 14:24 Christoph Michael Becker wrote:
> emf wrote:
>
>> I was hoping that with javascript one could get the size of the window
>> and assign it to the height of each image. There should be some way of
>> doing it. After all, how does the ImageZoom Firefox extension does it
>> when you click Image fit?
>>
>> What does viewport mean anyway?
>
> The term viewport is the common name for what you call "size of the
> window", see <http://en.wikipedia.org/wiki/Viewport#Computing>.  How to
> determine its size is described in the FAQ:
> <http://pointedears.de/scripts/faq/cljs/#getWindowSize>.
>
> [xpost & fup2 compl.lang.javascript]

OK, they are talking about width, no height. I had already found out 
that max-width seems to solve that problem, but it is not the problem I 
would like to solve.

emf

-- 
Natal Transits Calculator
https://files.nyu.edu/emf202/public/nt/nataltransits.html

[toc] | [prev] | [next] | [standalone]

#24535

emf wrote:

> On 2014-06-01 14:24 Christoph Michael Becker wrote:
>> emf wrote:
>>
>>> I was hoping that with javascript one could get the size of the window
>>> and assign it to the height of each image. There should be some way of
>>> doing it. After all, how does the ImageZoom Firefox extension does it
>>> when you click Image fit?
>>>
>>> What does viewport mean anyway?
>>
>> The term viewport is the common name for what you call "size of the
>> window", see <http://en.wikipedia.org/wiki/Viewport#Computing>.  How to
>> determine its size is described in the FAQ:
>> <http://pointedears.de/scripts/faq/cljs/#getWindowSize>.
>>
> OK, they are talking about width, no height. I had already found out
> that max-width seems to solve that problem, but it is not the problem I
> would like to solve.

They are talking about the height of the viewport as well.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24581

On 2014-06-02 06:14 Christoph Michael Becker wrote:
> emf wrote:
>
>> On 2014-06-01 14:24 Christoph Michael Becker wrote:
>>> emf wrote:
>>>
>>>> I was hoping that with javascript one could get the size of the window
>>>> and assign it to the height of each image. There should be some way of
>>>> doing it. After all, how does the ImageZoom Firefox extension does it
>>>> when you click Image fit?
>>>>
>>>> What does viewport mean anyway?
>>>
>>> The term viewport is the common name for what you call "size of the
>>> window", see <http://en.wikipedia.org/wiki/Viewport#Computing>.  How to
>>> determine its size is described in the FAQ:
>>> <http://pointedears.de/scripts/faq/cljs/#getWindowSize>.
>>>
>> OK, they are talking about width, no height. I had already found out
>> that max-width seems to solve that problem, but it is not the problem I
>> would like to solve.
>
> They are talking about the height of the viewport as well.

Thanks. Actually the code

function imageheight() {
   var i;
   for (i = 0; i < document.images.length; i += 1) {
     if (document.images[i].height === 600) { // portrait images height
       document.images[i].height =
         document.documentElement.clientHeight - 42; //padding + border
     }
   }
}
works OK with Firefox. Since the issue is not crucial, a note to the 
effect that "This webpage is best viewed with Firefox" should do until 
they standardize and/or implement the property.

emf

-- 
Google's top Spherical Triangle Calculator search result!
https://files.nyu.edu/emf202/public/js/spherical.html

[toc] | [prev] | [next] | [standalone]

#24583

emf wrote:

> On 2014-06-02 06:14 Christoph Michael Becker wrote:
>
>> They are talking about the height of the viewport as well.
> 
> Thanks. Actually the code
> 
> function imageheight() {
>   var i;
>   for (i = 0; i < document.images.length; i += 1) {
>     if (document.images[i].height === 600) { // portrait images height
>       document.images[i].height =
>         document.documentElement.clientHeight - 42; //padding + border
>     }
>   }
> }
> works OK with Firefox. Since the issue is not crucial, a note to the
> effect that "This webpage is best viewed with Firefox" should do until
> they standardize and/or implement the property.

I expect document.documentElement.clientHeight to properly report the
viewport's height in most, if not all, contemporary browsers; see
<538a2253$0$6671$9b4e6d93@newsspool3.arcor-online.net>.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24584

Christoph Michael Becker wrote:

> emf wrote:
>> On 2014-06-02 06:14 Christoph Michael Becker wrote:
>>> They are talking about the height of the viewport as well.
>> 
>> Thanks. Actually the code
>> 
>> function imageheight() {
>>   var i;
>>   for (i = 0; i < document.images.length; i += 1) {
>>     if (document.images[i].height === 600) { // portrait images height
>>       document.images[i].height =
>>         document.documentElement.clientHeight - 42; //padding + border
>>     }
>>   }
>> }
>> works OK with Firefox. Since the issue is not crucial, a note to the
>> effect that "This webpage is best viewed with Firefox" should do until
>> they standardize and/or implement the property.
> 
> I expect document.documentElement.clientHeight to properly report the
> viewport's height in most, if not all, contemporary browsers; see
> <538a2253$0$6671$9b4e6d93@newsspool3.arcor-online.net>.

Still, none of this is necessary because there is a much better solution 
with CSS (and it has been presented elsewhere).  But the OP has demonstrated 
that they are an aioe.org scriptkiddie-luser who thinks they know better, so 
they should go right ahead implementing this nonsense.  And never forget 
adding the "best viewed with …" part; this will really tell everyone that 
they are an expert in their field.

Fortunately, my newsreader allows me to observe the (wrong)doings of such 
people from a distance, in quotations only.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24508 — [FAQ Discussion] How do I find the size of the window? (was: Resizing images)

Thomas 'PointedEars' Lahn wrote:

> Christoph Michael Becker wrote:
> 
>> Some information on how to determine the viewport height can be found in
>> the NG's FAQ[1]--I suspect that this information is not up-to-date,
>> though.
> 
> You (and everyone else) are welcome to provide (further) suggestions for 
> improvement.

The algorithm described there relies mostly on
document.documentElement.clientWidth/Height, and provides fallbacks for
Safari 2 (Safari 3.0 has been released on June 11, 2007) and Opera <
9.25 (9.25 seems to have been released on December, 18 2007), as well as
for browsers in quirks mode.  I suspect that these fallbacks are very
rarely needed nowadays, if at all.

I have tested the presented strategy on IE 6.0.2900.2180, IE
7.00.5730.13, IE 8.0.6001.18702, IE 11.0.9600.17107, FF 29.0.1, Chrome
35.0.1916.114, Opera 12.17 and Dolphin 10.3.0, and all these browsers
use document.documentElement.clientHeight/Width in standards mode (and
the values seem to be correct).

PPK did (and is still doing?) some rather comprehensive research
regarding the availability of
document.documentElement.clientWidth/Height on mobile browsers[2].  I
was not able to find something similar for desktop browsers, besides a
much less comprehensive answer on StackOverflow[3].  The jQuery
implementation of $(windows).width()/height()[4] might be interesting, too.

So it might be reasonable to move the current content and to only give a
short answer ("use document.documentElement.clientWidth/Height") with a
caveat and reference to the former.

[1] <http://pointedears.de/scripts/faq/cljs/#getWindowSize>
    (I had omitted this footnote in my former post.)
[2] <http://www.quirksmode.org/mobile/tableViewport.html#t02>
[3]
<http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript#8876069>
[4] <https://github.com/jquery/jquery/blob/master/src/dimensions.js#L18>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24510 — Re: [FAQ Discussion] How do I find the size of the window?

2014-05-31 20:41, Christoph Michael Becker wrote:
[...]
> [1] <http://pointedears.de/scripts/faq/cljs/#getWindowSize>
>      (I had omitted this footnote in my former post.)
> [2] <http://www.quirksmode.org/mobile/tableViewport.html#t02>
> [3]
> <http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript#8876069>
> [4] <https://github.com/jquery/jquery/blob/master/src/dimensions.js#L18>

+ http://www.cinsoft.net/viewport.asp

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#24537 — Re: [FAQ Discussion] How do I find the size of the window?

Cezary Tomczyk wrote:

> + http://www.cinsoft.net/viewport.asp

Interesting; thanks for the pointer.

-- 
Christoph M. Becker

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web