CSS强制图像调整大小并保持纵横比


CSS force image resize and keep aspect ratio

我正在处理图像，遇到了纵横比问题。

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

如您所见，已经指定了height和width。我为图像添加了CSS规则：

1
2
3
img {
  max-width:500px;
}

号

但对于big_image.jpg，我收到width=500和height=600。如何设置图像的大小，同时保持它们的纵横比。

1
2
3
4
5
6
7
img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
1
2
3
4
<p>
This image is originally 400x400 pixels, but should get resized by the CSS:
</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

。

这将使图像缩小，如果它太大的指定区域(作为不利的，它不会扩大图像)。

相关讨论

下面的解决方案将允许根据父框宽度放大和缩小图像。

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

最佳实践(2018年)：

此解决方案告诉浏览器以最大可用宽度呈现图像，并将高度调整为该宽度的百分比。

1
2
3
4
5
6
7
8
9
.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

。

1
2
3
4
5
<p>
This image is originally 400x400 pixels, but should get resized by the CSS:
</p>

  <img width="400" height="400" src="https://placehold.it/400x400">

更高级的解决方案：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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;
}

。

1
2
3
4
5
6
<p>
This image is originally 640x220, but should get resized by the CSS:
</p>

 
    <img width="640" height="220" src="https://placehold.it/640x220">

对于指定填充的行，需要计算图像的纵横比，例如：

1
2
3
4
5
640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

。

所以，顶部填充=34.37%。

相关讨论

我很难解决这个问题，最终得出了一个简单的解决方案：

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

。

您可以根据需要调整宽度和高度，而"对象适合"属性将为您进行裁剪。

干杯。

相关讨论

background-size属性只能是ie>=9，但如果可以，您可以在background-image中使用一个div，并设置background-size: contain：

1
2
3
4
5
6
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背景大小文档，可以使用专有的筛选器声明模拟IE8中的背景大小属性：

Though Internet Explorer 8 doesn't support the background-size property, it is possible to emulate some of its functionality using the non-standard -ms-filter function:

号

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

。

相关讨论

与这里的一些答案非常相似，但在我的例子中，我的图像有时更高，有时更大。

这种风格很有魅力，确保所有图像都使用所有可用空间，保持比例，而不是剪切：

1
2
3
4
5
6
7
.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}
相关讨论

删除"高度"属性。

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

通过指定这两个选项，可以更改图像的纵横比。只设置一个将调整大小，但保留纵横比。

或者，为了限制过度销售：

1
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

号

相关讨论

只需将它添加到您的CSS中，它将自动收缩和扩展，并保持原始比例。

1
2
3
4
5
6
7
img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

号

相关讨论

对于同时指定了width、height和max-width的图像，没有标准方法来保持纵横比。

因此，我们要么指定width和height，以防止加载图像时出现页面"跳转"，要么使用max-width，而不指定图像的尺寸。

仅指定width(不指定height)通常没有什么意义，但是您可以尝试通过在样式表中添加一个类似IMG {height: auto; }的规则来重写heighthtml属性。

另请参见相关的Firefox bug 392261。

相关讨论

网址：https://jsfiddle.net/sot2qgj6/3/

如果你想把图像放在固定的宽度百分比，而不是固定的宽度像素，这里是答案。

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

技巧是

  • 使用padding-top设置从宽度开始的高度。
  • 使用position: absolute将图像放入填充空间。
  • 使用max-height and max-width确保图像不会覆盖父元素。
  • 使用display:block and margin: auto使图像居中。

    • 我也评论了小提琴内部的大部分技巧。

    我还找到了其他一些方法来实现这一点。在HTML中不会有真实的图像，所以当我需要"img"元素在HTML中时，我个人会给出最佳答案。

    使用背景的简单CSShttp://jsfiddle.net/4660S79H/2/

    文字在上的背景图像http://jsfiddle.net/4660S79H/1/

    使用绝对位置的概念是从这里开始的http://www.w3schools.com/howto/howto-css-Aspect-Ratio.asp

    要在强制图像具有特定纵横比的同时保持响应图像，可以执行以下操作：

    HTML：

    1
       <img src="../image.png" alt="image">

    和SCSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .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;
      }
    }

    号

    无论作者上传的图像大小如何，这都可以用于强制执行特定的纵横比。

    感谢@kseso，网址为http://codepen.io/kseso/pen/bfdhg。请检查此URL以获取更多比率和一个工作示例。

    相关讨论

    将图像容器标记的css类设置为image-class：

    1
     

    号

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

    1
    2
    3
    4
    5
    .image-full {
        background: url(...some image...) no-repeat;
        background-size: cover;
        background-position: center center;
    }

    号

    为了强制图像符合精确的大小，您不需要编写太多的代码。太简单了

    1
    2
    3
    4
    5
    6
    7
    8
    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 */
        }
    1
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

    。

    您可以这样创建一个DIV：

    1
     

    号

    并使用此CSS设置样式：

    1
    2
    3
    4
    5
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain; // this can also be cover

    号

    相关讨论

    您可以使用：

    1
    2
    3
    4
    5
    6
    7
    8
    img {
        width: 500px;
        height: 600px;
        object-fit: contain;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    这将使图像缩小，如果它太大的指定区域(作为不利的，它不会扩大图像)。

    SETEC的解决方案可以在自动模式下"收缩以适应"。但是，要以最佳方式扩展以适应"自动"模式，您需要首先将接收到的图像放入临时ID，检查它是否可以在高度或宽度上展开(取决于它的纵横比v/s显示块的纵横比)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $(".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");
    });

    号

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

    相关讨论

    使用伪元素进行垂直对齐怎么样？这更少的代码用于传送带，但我想它适用于每个固定大小的容器。它将保持纵横比，并在顶部/底部或左侧/书写处插入@灰色深色条，以获得最短的尺寸。同时，图像由文本水平居中，由伪元素垂直居中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
        > 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;
          }
        }

    。

    1
    2
    3
    4
    img {
      max-width: 80px; /* Also works with percentage value like 100% */
      height: auto;
    }

    号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <p>
    This image is originally 400x400 pixels, but should get resized by the CSS:
    </p>
    <img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

    <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>
    <img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">

    号