HTML img scaling

后端未结

关注

 8  963

I\'m trying to display some large images with HTML img tags. At the moment they go off the edge of the screen; how can I scale them to stay within the browser window?

相关标签:

8条回答

孤独总比滥情好

2020-12-12 22:13

The best way I know how to do this, is:

1) set overflow to scroll and that way the image would stay in but you can scroll to see it instead

2) upload a smaller image. Now there are plenty of programs out there when uploading (you'll need something like PHP or .net to do this btw) you can have it auto scale.

3) Living with it and setting the width and height, this although will make it look distorted but the right size will still result in the user having to download the full-sized image.

Good luck!

0 讨论(0)
发布评论:

提交评论
- 加载中...

梦谈多话

2020-12-12 22:19

For an automatic letterbox/pillarbox in a fixed-size rectangle, use the object-fit CSS property. That is usually what I want, and it avoids using code to figure out which is the dominant dimension or — what I used to do — embedding an <SVG> element with an <image> child to wrap the content with its nice preserveAspectRatio options.

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root
      {
        --box-side : min( 42vmin, 480px ) ;
      }
      body
      {
        align-items : center ;
        display : flex ; 
        flex-wrap : wrap ;
        justify-content : center ;
      }
      body,html
      {
        height : 100% ;
        width : 100% ;
      }
      img
      {
        background : grey ;
        border : 1px solid black ;
        height : var( --box-side ) ;
        object-fit : contain ;
        width : var( --box-side ) ;
      }
    </style>
    <title>object-fit</title>
  </head>
  <body>
    <img src="https://alesmith.com/wp-content/uploads/logos/ALESMITH-MasterLogoShadow01-MULTI-A.png" />
    <img src="https://ballastpoint.com/wp-content/themes/ballastpoint/assets/img/bp-logo-color.svg" />
    <img src="https://d2lchr2s24ssh5.cloudfront.net/wp-content/uploads/2014/01/GF19_PrimaryLogo_RGB.png" />
    <img src="https://s3-us-west-1.amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg">
    <img src="https://s3-us-west-2.amazonaws.com/lostabbey-prod/Logos/Logo_Port_SM_Circle_White.png" />
  </body>
</html>

0 讨论(0)

上一页 1 2