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

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。如何设置要调整大小的图像，同时保持它们的纵横比。

score 956 · Accepted Answer

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

如果图像对于指定区域太大，这将使图像缩小（缺点，它不会放大图像）。

score 542 · Accepted Answer

我一直在努力解决这个问题，最终得出了这个简单的解决方案：

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

您可以根据需要调整宽度和高度，并且 object-fit 属性将为您进行裁剪。

有关该object-fit属性的可能值和兼容性表的更多信息，请参见此处：https ://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

干杯。

score 275 · Accepted Answer

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

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

最佳实践（2018 年）：

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

.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">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

更高级的解决方案：

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

.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">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

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

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

640/220 = 2.909
100/2.909 = 34.37%

因此，顶部填充 = 34.37%。

score 74 · Accepted Answer

background-size 属性是 ie>=9 唯一的，但如果这对你没问题，你可以使用 divbackground-image和 set 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 文档，您可以使用专有过滤器声明模拟 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')";

score 67 · Accepted Answer

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

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

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

score 27 · Accepted Answer

删除“高度”属性。

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

score 19 · Accepted Answer

Firefox 71+ (2019-12-03) 和Chrome 79+ (2019-12-10) 支持将元素的和HTML 属性内部映射到新的CSS 属性（该属性本身还不能直接使用）。widthheightIMGaspect-ratio

计算出的纵横比用于为图片预留空间，直到加载完毕，只要计算出的纵横比与图片的实际纵横比相等，就可以防止图片加载后页面“跳转”。

为此，必须通过 CSS 将两个图像尺寸之一覆盖为以下 auto值：

IMG {max-width: 100%; height: auto; }

<img src="example.png" width="1280" height="720" alt="Example" />

在示例中，即使图像尚未加载且有效图像宽度由于max-width: 100%.

另请参阅相关的 Firefox错误 392261。

score 15 · Accepted Answer

这是一个解决方案：

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

这将确保图像始终覆盖整个父级（缩小和放大）并保持相同的纵横比。

score 12 · Accepted Answer

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

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

score 8 · Accepted Answer

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

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

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

感谢@Kseso 在 http://codepen.io/Kseso/pen/bfdhg。检查此 URL 以获取更多比率和工作示例。

score 8 · Accepted Answer

这是精神上的。使用 scale-down 属性 - 它可以自我解释。

内联样式：

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

这将阻止 flex 拉伸它。在这种情况下，图像将变为其父容器宽度的 50%，并且高度将按比例缩小以匹配。

把事情简单化。

score 6 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

我建议采用响应式方法，最佳实践是使用Viewport units和 min/max 属性，如下所示：

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

score 5 · Accepted Answer

要强制适合精确尺寸的图像，您不需要编写太多代码。就是这么简单

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

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

score 4 · Accepted Answer

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

如果您想放置具有固定宽度百分比但不具有固定宽度像素的图像，这就是答案。

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

诀窍是

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

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

我还找到了其他一些方法来实现这一点。html 中不会有真实的图像，所以当我需要 html 中的“img”元素时，我个人更喜欢最佳答案。

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

背景图像顶部有字 http://jsfiddle.net/4660s79h/1/

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

score 4 · Accepted Answer

只需将`height`属性替换为`aspect-ratio`属性即可。

img {
  max-width: 500px;
  aspect-ratio: 900 / 600;
}

<img src="big_image.png" width="900"/>

该aspect-ratio属性不是必需的，但可以防止图像布局偏移。

score 3 · Accepted Answer

你可以使用这个：

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

您可以将容器设置为display: flexand align-items: center（其他align-items值也可以）。代替align-items你也可以设置align-self图像本身。

score 1 · Accepted Answer

如果图像对于指定区域太大，这将使图像缩小（缺点，它不会放大图像）。

setec 的解决方案适用于自动模式下的“Shrink to Fit”。但是，为了优化 EXPAND 以适应“自动”模式，您需要首先将接收到的图像放入临时 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");
});

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

全屏演示：

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

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

score 0 · Accepted Answer

如果应用程序可以具有任何宽高比或分辨率的图像，那么您可以管理此链接中的高度和宽度。

这使用 Javascript 和 HTML

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

score 0 · Accepted Answer

您可以使用：-

transform: scaleX(1.2);

改变宽度而不改变高度。

和

transform: scaleY(1.2);

改变高度而不改变宽度

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

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

25 回答 25

最佳实践（2018 年）：

更高级的解决方案：

只需将height属性替换为aspect-ratio属性即可。

您可以使用：-

Related

Reference

只需将`height`属性替换为`aspect-ratio`属性即可。