CSS强制调整图像大小并保持长宽比

我正在处理图片，我遇到了一个长宽比的问题。

<img src="big_image.jpg" width="900" height="600" alt="" />

如你所见，"高度 "和 "宽度 "已经被指定。我为图像添加了CSS规则。

img {
  max-width:500px;
}

但是对于big_image.jpg，我收到width=500和height=600。我怎样才能设置图片的大小，同时保持它们的长宽比。

Cody Guldner
已编辑的问题 4日 六月 2013 в 5:23
编程
image css aspect-ratio
20日 十月 2012 в 6:20
38 种观点
解决办法

<！--开始片段。 js hide.false --> -- begin snippet: js hide: false -->

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>

<！--结束片段-->

这将使图像缩小，如果它对指定的区域来说太大了（作为缺点，它不会放大图像）。

[1]: http://i.stack.imgur.com/aEEkn.png

Flimm
编辑本段答案2日 三月 2016 в 2:12
评论(14)

下面的解决方案将允许放大和缩小图像，这取决于父框的宽度。

所有图像都有一个固定宽度的父容器仅用于演示目的。 在生产中，这将是父框的宽度。

最佳实践（2018）。

这个解决方案告诉浏览器以最大可用宽度渲染图像，并以该宽度的百分比调整高度。

<！--开始片段。 js hide: false -->

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">

</div>

<！--结束片段-->

Fancier Solution。

使用更高级的解决方案，你将能够裁剪图像，无论其大小，并添加背景色以补偿裁剪。

<！--开始片段。 js hide.false --> -- begin snippet: js hide: false -->

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">

  </div>
</div>

<！--结束片段-->

对于指定padding的那一行，你需要计算图像的长宽比，例如。

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

所以，顶部填充物=34.37%。

Aternus
编辑本段答案23日 三月 2018 в 11:28
评论(17)

我'在这个问题上挣扎得相当辛苦，最终得出了这个简单的解决方案。

object-fit: cover;
width: 100%;
height: 250px;

你可以根据自己的需要调整宽度和高度，object-fit属性会帮你做裁剪。

干杯。

评论(7)

背景尺寸属性只有ie>=9，但如果你觉得没问题，你可以使用一个带有background-image的div，并设置background-size: contain。

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

现在你可以将你的Div大小设置为你想要的大小，不仅图像将保持其长宽比，而且还将在Div的垂直和水平方向上集中。只是不要忘记在css上设置尺寸，因为div本身没有宽度/高度属性。

这种方法与setecs的答案不同，使用这种方法，图像区域将是恒定的，并由你来定义（根据div的大小和图像的长宽比，在水平或垂直方向上留下空位），而setecs的答案将为你提供一个与缩放后的图像大小完全相同的盒子（没有空位）。

编辑。 根据MDN background-size documentation，你可以使用一个专有的过滤器声明来模拟IE8中的背景尺寸属性。

虽然Internet Explorer 8不支持background-size属性，但可以使用非标准的-ms-filter函数来模拟它的一些功能。

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
评论(5)

与这里的一些答案非常相似，但在我的情况下，我的图像有时较高，有时较大。

这种风格就像一个魅力一样，确保所有的图片都使用所有的可用空间，保持比例而不是削减。

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}
评论(3)

删除"高度"属性。

通过指定这两个属性，你就改变了图像的长宽比。只设置一个会调整大小，但保留长宽比。

可选的是，限制过大的尺寸。

评论(4)

只需将其添加到你的css中，它就会在保持原有比例的情况下自动收缩和展开。

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
评论(3)

没有标准的方法来保持图像的长宽比，同时指定 "宽度"、"高度 "和 "最大宽度"。

因此，我们不得不指定 "宽度 "和 "高度 "以防止在加载图像时出现页面 "跳跃"，或者使用 "最大宽度 "而不指定图像的尺寸。

只指定 "width"（没有 "height"）通常意义不大，但你可以尝试通过在样式表中添加 "IMG {height: auto; }"这样的规则来覆盖 "height "的HTML属性。

也请看相关的Firefox bug 392261。

Marat Tanalin
编辑本段答案10日 四月 2018 в 11:34
评论(3)

将图片容器标签的CSS类设置为 "imag-class"。

<div class="image-full"></div>

并将其添加到你的CSS样式表中。

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}
评论(0)

要在保持响应式图像的同时，仍然强制要求图像具有一定的纵横比，你可以做以下操作。

HTML。

<div class="ratio2-1">
   ![image](../image.png)
</div>

而SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

这可以用来强制执行一定的纵横比，不管作者上传的图片大小。

感谢 http://codepen.io/Kseso/pen/bfdhg 的 @Kseso。 更多的比例和工作实例请查看这个URL。

评论(1)

https://jsfiddle.net/sot2qgj6/3/

如果你想放置宽度固定百分比的图像，但宽度不是固定像素的图像，那么答案是这样的。

而在处理不同尺寸的屏幕时会很有用。

诀窍是

  1. 使用 "padding-top "从宽度设置高度。

  2. 使用 "position.absolute "将图片放在padding空间。 绝对 "把图片放在padding空间。

  3. 使用max-height和max-width来确保图像不会超过父元素。

  4. 使用display:block 和 margin: auto使图片居中。

我也在fiddle里面注释了大部分的技巧。

我也找到一些其他的方法来实现。 在html中不会有真正的图片，所以当我需要"img&quot的时候，我个人更倾向于顶部的答案。 元素的时候。

通过使用背景简单的css。 http://jsfiddle.net/4660s79h/2/

背景图片，上面有文字。 http://jsfiddle.net/4660s79h/1/

使用绝对位置的概念来自这里 http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Choco Li
编辑本段答案5日 三月 2018 в 7:05
评论(1)

如果要强制要求图片符合一个精确的尺寸，你不需要写太多的代码。 它'如此简单

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }
![Logo](http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png)

<！--结束片段-->

评论(0)

你可以用这个。

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}
Rakete1111
编辑本段答案26日 三月 2016 в 1:30
评论(0)

你可以创建一个这样的div。

<div class="image" style="background-image:url('/to/your/image')"></div>

然后用这个css来做样式。

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover
评论(3)

如果图像在指定的区域内太大，会使图像缩小（缺点是不能放大图像）。

setec的解决方案对于自动模式下的"Shrink to Fit" 自动模式下的解决方案。 但是，要想在'auto&#39.模式下达到最佳的EXPAND to fit效果，你需要先在'auto' 模式下，你需要先把接收到的图像放到一个临时ID中。 检查它是否可以在高度或宽度上展开（取决于它的纵横比与你的显示块的纵横比）。

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

当收到的图像小于显示框时，这种方法很有用。 您必须将它们以原始的小尺寸保存在服务器上，而不是以它们的扩展版本来填充您的大显示框，以节省大小和带宽。

xec
编辑本段答案18日 二月 2015 в 8:29
评论(1)

全屏展示。

img[data-attribute] {height: 100vh;}

请记住，如果视口高度大于图像，图像自然会相对于差值降低。

评论(0)

<！--开始片段。 js hide.false --> -- begin snippet: js hide: false -->

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>


<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>

<！--结束片段-->

评论(0)

使用伪元素进行垂直对齐怎么样？ 这段较少的代码是针对一个旋转木马的，但我想它适用于每个固定尺寸的容器。 它将保持长宽比，并在顶部/底部或左/写插入@灰暗条，以获得最短的尺寸。 同时，图像通过文本对齐方式水平居中，通过伪元素垂直居中。

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
评论(0)