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

img {显示：块；最大宽度：230px；最大高度：95px；宽度：自动；高度：自动； }

此图像最初为 400x400 像素，但应通过 CSS 调整大小：

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

---

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

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

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

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

干杯。

---

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

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

最佳实践（2018 年）：

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

.parent { 宽度：100px; } img { 显示：块；宽度：100%；高度：自动； }

此图像最初为 400x400 像素，但应通过 CSS 调整大小：

更高级的解决方案：

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

.parent { 宽度：100px; } .container { 显示：块；宽度：100%；高度：自动；位置：相对；溢出：隐藏；填充：34.37% 0 0 0； /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */ } .container img { display: block;最大宽度：100%；最大高度：100%；位置：绝对；顶部：0；底部：0；左：0；右：0； }

此图像最初为 640x220，但应通过 CSS 调整大小：

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

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

640/220 = 2.909
100/2.909 = 34.37%

因此，顶部填充 = 34.37%。

---

background-size 属性仅 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 中的 background-size 属性：

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

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

---

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

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

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

---

删除“高度”属性。

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

---

Firefox 71+ (2019-12-03) 和 Chrome 79+ (2019-12-10) 支持 width 的内部 mapping 和 IMG 元素的 height HTML 属性到新的 aspect-ratio CSS财产（财产本身还不能直接使用）。

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

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

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

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

在示例中，即使图像尚未加载且有效图像宽度小于 1280（作为 max-width: 100% 的结果），也会保持 16:9 (1280:720) 的纵横比。

另请参阅相关的 Firefox bug 392261。

---

这是一个解决方案：

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

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

---

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

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

---

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

内联样式：

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

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

把事情简单化。

---

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

img { 最大宽度：500px;纵横比：900 / 600； }

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

---

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

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 以获取更多比率和工作示例。

---

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

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

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

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

---

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

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

---

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

img{ 宽度：200px;高度：自动；适合对象：包含； /* 使徽标适合图像大小 */ -o-object-fit: contains; /* 适合 Opera 浏览器的徽标 */ object-position: top; /* 设置标志位置 */ -o-object-position: top; /* Opera 浏览器的徽标位置 */ }

---

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

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

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

诀窍是

使用 padding-top 从宽度设置高度。使用 position: absolute 将图像放在填充空间中。使用 max-height 和 max-width 确保图像不会超过父元素。使用 display:block 和 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

---

你可以使用这个：

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

---

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

---

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

---

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

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

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

---

您可以使用：-

transform: scaleX(1.2);

改变宽度而不改变高度。

和

transform: scaleY(1.2);

改变高度而不改变宽度

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

---

img { 最大宽度：80px; /* 也适用于百分比值，例如 100% */ height: auto; }

此图像最初为 400x400 像素，但应通过 CSS 调整大小：

假设HTML的作者故意希望高度为宽度的一半，这个CSS会忽略HTML作者的意愿，这可能是也可能不是你想要的：

---

使用伪元素进行垂直对齐怎么样？这个更少的代码适用于轮播，但我想它适用于每个固定大小的容器。它将保持纵横比并在顶部/底部或左侧/写入上插入@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;
      }
    }

---

全屏演示：

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

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

---

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

这使用 Javascript 和 HTML

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

---

您可以使用 aspect-ratio 属性 css

.my-image {
 aspect-ratio: 1/1; // square
 aspect-ration: 16/9; 
 aspect-ration: 4/3;
 aspect-ration: 2/3;
}

---