首页 文章

如何调整图像大小以适应浏览器窗口？

提问于
浏览 次
84

这似乎微不足道，但毕竟研究和编码我无法让它工作 . 条件是：

  • 浏览器窗口大小未知 . 所以请不要提出涉及绝对像素大小的解决方案 .

  • 图像的原始尺寸未知，可能已经或可能不适合浏览器窗口 .

  • 图像垂直和水平居中 .

  • 必须保留图像比例 .

  • 图像必须完整显示在窗口中（无裁剪 . ）

  • 我不希望出现滚动条（如果图像适合，它们不应该出现 . ）

  • 当窗口尺寸发生变化时，图像会自动调整大小，以占用所有可用空间而不会大于其原始大小 .

基本上我想要的是这个：

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

上面代码的问题在于它不起作用：pic通过添加垂直滚动条来获取所需的所有垂直空间 .

我自己可以使用PHP，Javascript，JQuery，但是我只能使用纯CSS解决方案 . 我不在乎它是否在IE中不起作用 .

html css

11 回答

  • 1

    Update 2018-04-11

    这是一个没有Javascript的CSS解决方案 . 图像将动态居中并调整大小以适合窗口 .

    <html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html>

    使用JQuery的[other，old]解决方案设置图像容器的高度（在下面的示例中为 body ），以便图像上的 max-height 属性按预期工作 . 调整客户端窗口大小时，图像也会自动调整大小 .

    <!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit { /* set relative picture size */
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html>

    注意：用户gutierrezalex在此页面上打包了一个与JQuery插件非常相似的解决方案 .

    回复于
  • 0

    这是一个简单的CSS解决方案（JSFiddle），适用于所有地方，移动和IE包括：

    CSS 2.0：

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

    HTML：

    <body>
  <img src="images/your-image.png" />
</body>
    回复于
  • 13

    CSS3引入了相对于视口测量的新单位，在这种情况下是视窗 . 它们分别是 vh 和 vw ，分别测量视口高度和宽度 . 这是一个简单的CSS解决方案：

    img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

    对此的一个警告是，只有在页面上没有其他元素贡献高度时它才有效 .

    回复于
  • 70

    如果您愿意在图像周围放置容器元素，那么纯CSS解决方案很简单 . 你看，当父元素垂直延伸以包含它的子元素时，99％的高度没有意义 . 父级需要具有固定高度，例如......视口的高度 .

    HTML

    <!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
    <img class='make-it-fit' 
         src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

    CSS

    div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}

img.make-it-fit {
    max-width: 99%;
    max-height: 99%;
}

    玩the fiddle .

    回复于
  • 0

    我的一般懒惰的CSS规则：

    .background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

    这可能会放大您的图像，如果它是低分辨率开始（这与您的图像质量和尺寸大小有关 . 为了使图像居中，您也可以尝试（在CSS中）

    display:block;    
margin: auto 0;

    使图像居中

    在您的HTML中：

    <div class="background"></div>
    回复于
  • 3

    调整图像大小以适应最长边的屏幕，保持其纵横比

    img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}

    • width: 100vw - 图像宽度将是视口的100％

    • height: auto - 图像高度将按比例缩放

    • max-height: 100vw - 如果图像高度变得超过视口，它将减小以适应屏幕，因此图像宽度将因以下属性而减小

    • object-fit: contain - 缩放替换的内容以保持其宽高比，同时适合元素的内容框

    注意：自IE 16.0起，完全支持 object-fit

    回复于
  • 3
    width: 100%;
overflow: hidden;

    我相信应该这样做 .

    回复于
  • 1
    html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}

    或者可以看一下：http://css-tricks.com/how-to-resizeable-background-image/

    回复于
  • 1

    我有类似的要求，不得不做基本的CSS和JavaScript . 没有JQuery可用 .

    这就是我的工作 .

    <html>
      <head>
            <style>
                   img {
                          max-width: 95% !important;
                          max-height: 95% !important;
                       }
            </style>
            <script>
                   function FitImagesToScreen() {
                      var images = document.getElementsByTagName('img');
                      if(images.length > 0){
                         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()'>
      ----    
      </body>
</html>

    注意：我没有使用100％的图像宽度，因为总有一些填充要考虑 .

    回复于
  • 20

    在@ Rohit的答案的基础上，这可以解决Chrome标记的问题，可靠地调整图像大小，还适用于垂直堆叠的多个图像，例如： <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> 这可能是一种更优雅的方式 .

    <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>
    回复于
  • 37

    简单一点 . 谢谢

    .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>
    回复于

相关问题