以最大宽度按比例缩放CSS中的图像

需要指定原始宽度和高度:

<img src="/whatever" width="100" height="200" alt="Whatever" />

然后在CSS中使用类似的内容:

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

如果前面没有宽度和高度,可以使用jquery尝试此操作,但里程数可能会有所不同:

$(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});

显然,替换 #content 使用您希望将功能范围限定到的任何选择器。

与接受的答案相反,您可以这样做而不必在HTML中指定大小。这一切都可以在CSS中完成:

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

设置恒定宽度时,请使用:

height: auto

下面介绍如何在不使用JavaScript的情况下完成这项工作。设置你的 max-width 到你想要的长度。

#content img { 
   max-width: 620px;
   height: auto;
}

当我没有在Mac上明确设置宽度或高度时,这对我很有用,它使用了Firefox 28、Chrome 34和Safari 7。 img 标签。

不要将CSS中的宽度设置为 最大宽度 按照一个人的建议进行设置,因为任何小于容器宽度的图像(如图标)都将被放大,比所需的要大得多。

在图像上同时使用宽度和最大宽度会导致IE8出错。

将图像的宽度放在最大宽度的分区中。(然后诅咒女士。)

我必须满足以下要求:

1. 加载图像时,页面不能回流。服务器端已知图像大小,可以进行计算。
2. 图像必须按比例缩放
3. 图像不能超过包含元素的宽度
4. 图像不能放大,只有在必要时才能缩小。
5. 必须使用img元素而不是背景以确保图像也正确打印
6. 没有JavaScript!

我最近想到的就是这个可怕的装置。它需要三个元素和两个内嵌样式,但据我所知,这是按比例缩放图像的最佳方法。所有的 height: auto; 这里的建议否定了在服务器端指定图像尺寸的观点,并导致内容在加载时跳跃。

.image {
  position: relative;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- container element with max-width prevents upscaling -->
<div class="image" style="max-width: 640px;">
  <!-- div with padding equal to the image aspect ratio to make
       the element the correct height -->
  <div style="padding-top: 75%;"></div>
  <!-- img scaled to completely fill container -->
  <img src="//placebear.com/640/480" />
</div>

https://jsfiddle.net/Lqg1fgry/6/ -“你好”就在那里,这样你就可以看到图像后的内容是否会跳跃。

希望现在还不算太晚,但有了这一串代码,我在图库中获得了成比例的图像。要理解正在发生的事情需要时间,但要尝试并享受。

<style>
div_base {
    width: 200px; // whatever size you want as constrain unchangeable
    max-width: 95%; // this is connected to img and mus exist
}
div_base img {
    width: auto !important;  // very important part just have it there!
    height: 95%;  // and this one is linked to maxW above. 
}
</style>

function resizeBackground() {
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width();
    var stageHeight=$(window).height();
    var newHeight=$("#myPic").height();
    if( $(window).width() > $(window).height() )  {
        scale = stageHeight/newHeight;
        scale = stageWidth/newWidth;
    } else {
        scale = stageWidth/newWidth;
        scale = stageHeight/newHeight;
    }
    newWidth = newWidth*scale;
    newHeight = newHeight*scale
    $("#myPic").width(newWidth);
    $("#myPic").height(newHeight);
}