最佳实践（2018年）：

Question

我正在使用图像，我遇到了纵横比问题。

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

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

img {
  max-width:500px;
}

但对于big_image.jpg，我收到width=500和height=600。我如何设置图像以重新调整大小，同时保持其宽高比。

Answer 1

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

如果图像对于指定区域来说太大（如下图，则不会放大图像），这会使图像缩小。

Answer 2

以下解决方案将允许按比例放大和缩小图像，具体取决于父框宽度。

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

最佳实践（2018年）：

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

＆＃13;

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

＆＃13;

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

＆＃13;

Fancier解决方案：

使用更高级的解决方案，无论大小如何，您都可以裁剪图像并添加背景颜色以补偿裁剪。

＆＃13;

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

＆＃13;

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

＆＃13;

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

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

640/220 = 2.909
100/2.909 = 34.37%

所以，顶部填充= 34.37％。

Answer 3

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

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

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

干杯。

Answer 4

background-size属性仅为＆gt; = 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在标签本身上没有width / height属性。

这种方法与setecs的答案不同，使用此方法，图像区域将是恒定的并由您定义（根据div大小和图像宽高比在水平或垂直方向留下空白区域），而setecs答案将为您提供一个方框正好是缩放图像的大小（没有空格）。

编辑：根据{{3}}，您可以使用专有过滤器声明模拟IE8中的background-size属性：

虽然Internet Explorer 8不支持background-size属性，但可以使用非标准-ms-filter函数模拟其部分功能：

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

Answer 5

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

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

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Answer 6

删除“height”属性。

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

通过指定您正在更改图像的宽高比。只需设置一个就会调整大小但保留宽高比。

可选择限制夸大：

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

Answer 7

这是一个解决方案：

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

这将确保图像始终覆盖整个父对象（上下缩放）并保持相同的宽高比。

Answer 8

只需将此添加到您的css中，它将自动缩小和扩展，同时保持原始比率。

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

Answer 9

对于同时指定width，height和max-width的图片，没有标准方法可以保留宽高比。

因此，我们被迫指定width和height以防止在加载图片期间页面“跳转”，或者使用max-width而不指定图片的尺寸。

仅指定width（不包含height）通常没有多大意义，但您可以尝试通过添加height之类的规则来覆盖IMG {height: auto; } HTML属性你的样式表。

另请参阅相关的Firefox bug 392261。

Answer 10

要在保持图像具有特定宽高比的同时保持自适应图像，您可以执行以下操作：

HTML：

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</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以获取更多比率和工作示例。

Answer 11

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

如果您想要使用固定的宽度百分比放置图像，而不是固定的宽度像素，则可以找到答案。

这在处理不同大小的屏幕时非常有用。

技巧

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

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

我还找到了其他一些方法来实现这一目标。 html中没有真实的图像，所以当我需要时，我会亲自给出最佳答案＆＃34; img＆＃34; html中的元素。

简单的CSS 的 http://jsfiddle.net/4660s79h/2/

背景图片，顶部有文字 的 http://jsfiddle.net/4660s79h/1/

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

Answer 12

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

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

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

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

Answer 13

要强制使用符合确切尺寸的图像，您不需要编写太多代码。它很简单

＆＃13;

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 */
    }

＆＃13;

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

＆＃13;

Answer 14

我建议对于一种响应式方法，最佳做法是使用Viewport units和min / max属性，如下所示：

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Answer 15

您可以使用：

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Answer 16

您可以创建一个这样的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

Answer 17

这是精神上的。使用按比例缩小属性-它可以自我解释。

内联样式：

<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />

这将阻止柔韧性拉伸。在这种情况下，图像将达到其父容器宽度的50％，并且高度将缩小以匹配。

保持简单。

Answer 18

如果图像对于指定区域来说太大（如下图，则不会放大图像），这会使图像缩小。

setec的解决方案适用于＆＃34; Shrink to Fit＆＃34;在自动模式下。但是，最佳地扩展以适应“汽车”。模式，您需要先将收到的图像放入临时ID，检查它是否可以在高度或宽度上扩展（取决于其纵横比v / s，显示块的纵横比），

$(".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");
});

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

Answer 19

您可以将容器设置为display: flex和align-items: center（其他align-items值也可以）。除了align-items，您还可以在图像本身上设置align-self。

Answer 20

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

Answer 21

如何使用伪元素进行垂直对齐？这个较少的代码是用于旋转木马，但我想它适用于每个固定大小的容器。它将保持纵横比并在顶部/底部或左/写上插入@灰色 - 深色条形以获得最短尺寸。同时，图像通过文本对齐水平居中，并通过伪元素垂直居中。

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

Answer 22

全屏演示：

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

请记住，如果视口高度大于图像，则图像会自然地相对于差异变差。

Answer 23

如果应用程序可以具有任何长宽比或分辨率的图像，则可以按照此链接来管理高度和宽度。

这使用Javascript和HTML

https://stackoverflow.com/a/65090175/13338731

Answer 24

您可以使用：-

Interface2<? super Number, ? extends Number>

改变宽度而不改变高度。

和

transform: scaleX(1.2);

改变高度而不改变宽度

您可以在 html 和 css 中的图像和视频标签上使用它。这也不会改变纵横比。

Answer 25

我认为，这最终是最好的解决方案，简单：

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

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

25 个答案:

最佳实践（2018年）：

Fancier解决方案：

您可以使用：-