Question

现在，我正在使用max-width来缩放图像以适应。但是，它们并不按比例缩放。有没有办法导致这种情况发生？我对Javascript / jQuery持开放态度。

如果可能，有没有办法在不知道图像的原始尺寸的情况下执行此操作（可能使用Javascript / jQuery确定）？

Answer 1

与接受的答案相反，您可以在不指定HTML大小的情况下执行此操作。它可以在CSS中完成：

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

Answer 2

您需要指定原始宽度和高度：

<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替换为您要将功能范围设置为的任何选择器。

Answer 3

设置恒定宽度时使用：

height: auto

Answer 4

以下是没有Javascript的方法。将max-width设置为您想要的长度。

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

当我没有在img标签中明确设置宽度或高度设置时，这对我在使用Firefox 28，Chrome 34和Safari 7的Mac上进行了测试。

在max-width设置之后，不要将CSS中的宽度设置为100％，因为那时任何比容器宽度窄的图像（如图标）都会比期望的。

Answer 5

使用图像上的宽度和最大宽度搞砸IE8。

将宽度放在图像上并将其包装在具有最大宽度的div中。（然后诅咒MS。）

Answer 6

我必须按照以下要求这样做：

图片加载时，页面不得重新打印。图像大小在服务器端是已知的，可以进行计算。
图片必须按比例缩放
图片不得宽于包含元素
图片不得放大，仅在必要时放下
必须使用img元素而非背景以确保图像也能正确打印
没有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/ - “Hello”就在那里，你可以看到图像后面的内容是否会跳转。

Answer 7

希望现在还不算太晚，但凭借这段代码，我设法在我的画廊中获得了比例图像。需要时间才能了解正在发生的事情，但要尝试并享受。

<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>

Answer 8

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);
}

在具有最大宽度的CSS中按比例缩放图像

8 个答案: