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

Groups > comp.lang.javascript > #24520

Re: Resizing images

Cross-posted to 2 groups.

Show all headers | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web