How to resize an image to fit in the browser window?

后端未结

关注

 14  1067

再見小時候

This seems trivial but after all the research and coding I can\'t get it to work. Conditions are:

The browser window size is unknown. So please don\'t propose

相关标签:

14条回答

情书的邮戳

2020-11-28 19:32
```
html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}
```
Or maybe check this out: http://css-tricks.com/how-to-resizeable-background-image/
0 讨论(0)
发布评论:

提交评论
- 加载中...
无人及你

2020-11-28 19:34
Resize Image to Fit the Screen by the Longest Side maintaining its Aspect Ratio
```
img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}
```
- width: 100vw - image width will be 100% of view port
- height: auto - image height will be scaled proportionally
- max-height: 100vw - if image height would become more than view port it will be decreased to fit the screen, consequently image width will be decreased because of the following property
- object-fit: contain - the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
  
  Note: object-fit is fully supported only since IE 16.0
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲&欢浪女

2020-11-28 19:35

Building upon @Rohit's answer, this fixes issues flagged by Chrome, reliably resizes the images, and also works for multiple images that are vertically stacked, e.g. <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> There is probably a more elegant way of doing this.

<style>
    img {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
</style>
<script>
    function FitImagesToScreen() {
        var images = document.getElementsByTagName('img');
        if(images.length > 0){
            document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
            for(var i=0; i < images.length; i++){
                if(images[i].width >= (window.innerWidth - 10)){
                    images[i].style.width = 'auto';
                }
            }
        }
    }
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>

0 讨论(0)

误落风尘

2020-11-28 19:36
My general lazy CSS rule:
```
.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}
```
This may zoom in on your image if it is low-res to begin with (that's to do with your image quality and size in dimensions. To center your image, you may also try (in the CSS)
```
display:block;    
margin: auto 0; 
```
to center your image

in your HTML:
```
<div class="background"></div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

囚心锁ツ

2020-11-28 19:37

Make it simple. Thanks

.bg {
  background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}

<div class="bg"></div>

0 讨论(0)

灰色年华

2020-11-28 19:40
CSS3 introduces new units that are measured relative to the viewport, which is the window in this case. These are vh and vw, which measure viewport height and width, respectively. Here is a simple CSS only solution:
```
img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}
```
The one caveat to this is that it only works if there are no other elements contributing height on the page.
0 讨论(0)
发布评论:

提交评论
- 加载中...