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

Groups > comp.infosystems.www.authoring.stylesheets > #5285

Re: Resizing images

Show all headers | View raw

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>.

-- 
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.

Back to comp.infosystems.www.authoring.stylesheets | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Re: Resizing images Christoph Michael Becker <cmbecker69@arcor.de> - 2014-05-31 13:27 +0200
  Re: Resizing images dorayme <do_ray_me@bigpond.com> - 2014-05-31 22:40 +1000
    Re: Resizing images Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-02 14:12 +0200
  Re: Resizing images Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-05-31 14:46 +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 Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-02 14:20 +0200
      Re: Resizing images Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-02 23:45 +0200

csiph-web