【问题标题】:How can I resize an image dynamically with CSS as the browser width/height changes?随着浏览器宽度/高度的变化,如何使用 CSS 动态调整图像大小?
【发布时间】:2011-06-08 17:32:38
【问题描述】:

我想知道如何使图像随浏览器窗口一起调整大小,here 是我目前所做的(或下载the whole site in a ZIP)。

这在 Firefox 中运行良好,但在 Chrome 中存在问题:图像并不总是调整大小,它在某种程度上取决于加载页面时窗口的大小。

这在 Safari 中也可以正常工作,但有时图像会以其最小宽度/高度加载。也许这是由图像大小引起的,我不确定。 (如果加载正常,请尝试刷新几次以查看错误。)

有什么想法可以让我更防弹吗? (如果需要 JavaScript,我也可以接受,但最好使用 CSS。)

【问题讨论】:

标签: css image browser resize window


【解决方案1】:

你在使用 jQuery 吗?

因为我快速搜索了 jQuery 插件,他们似乎有一些插件可以做到这一点,检查这个,应该可以工作:

http://plugins.jquery.com/project/jquery-afterresize

编辑:

这是 CSS 解决方案,我只是添加了一个 style="width: 100%",并且至少在 chrome 和 Safari 中对我有用。我没有ie,所以就在那里测试,让我知道,这里是代码:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

【讨论】:

  • 对于这样一个简单的问题,jQuery 是不必要的。为什么加载 50 KB+(整个库)比几行 JS 更好?
  • 当然,你是完全正确的,s why Im 问他,如果他使用 jQuery,因为如果他这样做可能是一个好主意,只需添加插件!
  • 所以没有 JS 是不可能的吗?我找到了像unstoppablerobotninja.com/search/… 这样的简单解决方案,但是我无法在我的模板中成功地完全实现它
【解决方案2】:
window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

在 IE 中,onresize 事件会在每个像素更改(宽度或高度)时触发,因此可能存在性能问题。使用 javascript 的 window.setTimeout() 将图像大小调整延迟几毫秒。

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

【讨论】:

    【解决方案3】:

    可以用纯 CSS 完成,甚至不需要媒体查询。

    要使图像灵活,只需添加max-width:100%height:auto。图片 max-width:100%height:auto 在 IE7 中有效,但在 IE8 中无效(是的,另一个奇怪的 IE 错误)。要解决此问题,您需要为 IE8 添加width:auto\9

    来源:http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    CSS:

    img {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
    

    如果你想强制图像的固定最大宽度,只需将其放入容器中,例如:

    <div style="max-width:500px;">
        <img src="..." />
    </div>
    

    JSFiddle example here。无需 JavaScript。适用于最新版本的 Chrome、Firefox 和 IE(这是我测试过的全部)。

    【讨论】:

    • 我用 Opera 11 和一些最近的 Firefox 测试了 jsfiddle 链接,虽然当窗口缩小时它可以很好地调整图像大小,但当窗口超过 650 像素时它就不能这样做
    • @GDR 我不希望图像超出其原始大小,它只会像素化并且看起来很难看。如果您需要更大,我会从更大的图像开始。
    • 好的,那么我错误地认为这是这个问题的重点,对不起。
    • 将 max-width 设置为 100% 并将 height 设置为 auto 对我没有任何帮助 - 我确实使用了一个容器。将图片包裹在一个 div 中,设置最大高度/宽度,让图片(#div img {})宽度为 100%,高度为 100%。
    • 这是什么魔法?!这太棒了!
    【解决方案4】:

    将调整大小属性设置为两者。然后你可以像这样改变宽度和高度:

    .classname img{
      resize: both;
      width:50px;
      height:25px;
    }
    

    【讨论】:

      【解决方案5】:

      您可以使用 CSS3 scale 属性通过 css 调整图像大小:

      .image:hover {
        -webkit-transform:scale(1.2); 
                transform:scale(1.2);
      }
      .image {
        -webkit-transition: all 0.7s ease; 
                transition: all 0.7s ease;
      }
      

      进一步阅读

      【讨论】:

        【解决方案6】:

        最初,我使用的是以下 html/css:

        img {
          max-width: 100%;
          height: auto;
          width: auto\9; /* ie8 */
        }
        
        <div> 
          <img src="..." />
        </div>
        

        然后我将class="img" 添加到&lt;div&gt;,如下所示:

        <div class="img">
          <img src="..." />
        </div>
        

        一切都开始正常了。

        【讨论】:

          【解决方案7】:

          2018 及以后的解决方案:

          鉴于我们有猫的形象,使用视口相关单位应该会让您的生活更轻松:

          现在我们希望在代码中加入这只猫,同时尊重纵横比:

          img {
            width: 100%;
            height: auto;
          }
          &lt;img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat"&gt;

          到目前为止还不是很有趣,但是如果我们想将猫的宽度更改为最大 50% 的视口呢?

          img {
            width: 100%;
            height: auto;
            /* Magic! */
            max-width: 50vw;
          }
          &lt;img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat"&gt;

          相同的图像,但现在限制为 最大宽度 50vw vw(=视口宽度)表示图像将是视口的 X 宽度,具体取决于提供的数字。这也适用于高度:

          img {
            width: auto;
            height: 100%;
            max-height: 20vh;
          }
          &lt;img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat"&gt;

          这将图像的高度限制为最大视口的 20%。

          【讨论】:

          • 谢谢!当我有不同尺寸的图像时,如何确定 vh 和 vw?
          • 嗨@HermanToothrot,您是说要在使用视口单位时保持纵横比吗?
          • @Roberrrt 说我有几张不同尺寸的图片并在一个内联块中,并且希望保持所有图片的纵横比但将它们设置为相同的高度或宽度。
          • 宽度:100% 和最大高度:50vh 或反向
          • @Roberrrt width: 100% 似乎没有太大影响。我只需要猜测 vh,在我的情况下 50 太多了,而 40 最大化了所有图像的高度。
          【解决方案8】:

          只需使用此代码。大多数人忘记的是将 max-width 指定为图像的最大宽度

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

          查看此演示 http://shorturl.at/nBKVY

          【讨论】:

            【解决方案9】:

            试试

            .img{
               width:100vw; /* Matches to the Viewport Width */
               height:auto;
               max-width:100% !important;
            }
            

            仅适用于显示块和内联块,这对弹性项目没有影响,因为我花了很长时间试图找出答案。

            【讨论】:

              猜你喜欢
              • 2014-01-02
              • 1970-01-01
              • 2014-01-31
              • 1970-01-01
              • 1970-01-01
              • 2013-06-23
              • 1970-01-01
              • 2015-12-19
              • 1970-01-01
              相关资源
              最近更新 更多